错误 1068：属性在类型 angular 上不存在 2 (AOT)

Question

I am new in angular 2, i am making a "User Register" form but it shows error in "Property does not exist on type" in Phone number Validation.

I am compiling in JIT and AOT.

In JIT compiler shows error message and run my user register form it is working properly. but when i compile with AOT shows compilation error.

I am reading the angular 2 form validation official doc here is the link Angular 2 form validation

Below is my Html Form and compiler Output

Html表格

<form class="ui large form" method="post" (ngSubmit)="onSubmit(registerForm.form.valid)" #registerForm="ngForm" novalidate>
        <sm-loader [complete]="!formSubmited" class="inverted" text="Loading..."></sm-loader>
        <div class="form-group">
            <div class="col-md-12 img-bottom">
                <div class="col-md-offset-4">
                    <img (click)="profileImage.click()" class="img img-responsive img-circle ui middle aligned tiny circular image profileImage"
                        [src]="profileImageSrc" />
                    <input class="form-control user-reg-img" (change)="fileChangeEvent($event)" type="file" accept="image/*" #profileImage [hidden]="true"
                    />
                </div>
                <div class="col-md-12 image-padding">
                    <span class="user-reg-img-name" (click)="profileImage.click()">{{profileImageName}}</span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label><strong>Signup with Email Address:</strong></label>
        </div>

        <div class="form-group">
            <p class="success text-center">{{successMessage}}</p>
            <p class="error text-center">{{errorMessage}}</p>
            <div class="field">
                <input type="text" name="name" placeholder="Name" [(ngModel)]="register.name" #name="ngModel" required class="form-control input-reg"
                />
                <div [hidden]="name.valid || name.pristine" class="error text-left">
                    Name is required
                </div>
            </div>
        </div>

        <div class="form-group">
            <div class="field">
                <input class="form-control input-reg" type="email" name="email" placeholder="Email" [(ngModel)]="register.email" #email="ngModel"
                    required />
                <div [hidden]="email.valid || email.pristine" class="error text-left">
                    Email is required
                </div>
            </div>
        </div>


        <div class="form-group">
            <input type="text" id="mobile" class="form-control  input-reg" required minlength="10" maxlength="10" name="mobile" [(ngModel)]="register.mobile"
                placeholder="Phone Number" #mobile="ngModel" pattern="[0-9]+">
            <div *ngIf="mobile.errors && (mobile.dirty || mobile.touched)">
                <div class="error text-left" [hidden]="!mobile.errors.required">
                    Mobile Number is required
                </div>
                <div class="error text-left" [hidden]="!mobile.errors.minlength">
                    Mobile Number must be at least 10 characters long.
                </div>
                <div class="error text-left" [hidden]="!mobile.errors.maxlength">
                    Monile Number cannot be more than 10 characters long.
                </div>
            </div>
        </div>

        <div class="form-group">
            <div class="field">
                <input class="form-control input-reg" type="password" name="password" placeholder="Password" [(ngModel)]="register.password"
                    #password="ngModel" required />
                <div [hidden]="password.valid || password.pristine" class="error text-left">
                    Password is required
                </div>
            </div>
        </div>

        <div class="form-group">
            <input type="checkbox" name="isAgree" [(ngModel)]="register.isAgree" #isAgree="ngModel" required />
            <label id="label-terms-cond">I Agree to Post Bucks <a href="#">Terms & Conditions</a></label>
            <div [hidden]="!showTermsAgreeErrorMsg" class="error text-left">
                Please agree the terms and conditions to continue
            </div>
        </div>

        <div class="form-group">
            <textarea rows="4" class="form-control font-small terms-cond-textarea" rows="7">You must follow any policies made available to you within the Services.</textarea>
        </div>

        <div class="form-group">
            <button class="fluid yellow large ui button btn btn-block btn-warning reg-btn-submit" type="submit">Signup</button>
        </div>
    </form>

AOT 输出

提前致谢

维克拉姆

Answer 1

看起来 JIT 编译器永远不会检查 mobile.errors 的类型，但是 AOT 在编译时通过查看这一行来检查它：

<div *ngIf="mobile.errors && (mobile.dirty || mobile.touched)">

根据这一行 mobile.errors 是一个布尔值，你会得到你的踪迹...... 我无法重现此错误（版本问题？），但也许以下代码可以修复它：

<div *ngIf="(mobile.errors != null) && (mobile.dirty || mobile.touched)">

这里有一个未解决的问题：https://github.com/angular/angular/issues/11425

Answer 2

这是我的回答，在mobile.errors对象下找不到required的实际问题。下面是我的单行代码。

!mobile.errors['required']

如果未找到对象字段，那么我们将在模板中用作数组。

错误 1068：属性在类型 angular 上不存在 2 (AOT)

Error 1068: Property does not exist on type angular 2 (AOT)

javascript

validation

typescript

angular2-aot

angular

错误 1068：属性 在类型 angular 上不存在 2 (AOT)

Error 1068: Property does not exist on type angular 2 (AOT)

javascript

validation

typescript

angular2-aot

angular

错误 1068：属性在类型 angular 上不存在 2 (AOT)