错误1068：类型角度2（AOT）上不存在属性

我是新角度2，我正在创建一个“用户注册”窗体，但它显示电话中“类型上不存在属性”中的错误号码验证。错误1068：类型角度2（AOT）上不存在属性

我在编译JIT和AOT。

在JIT编译器显示错误消息并运行我的用户注册表格它正常工作。但是当我用AOT编译显示编译错误。

我读角2表单验证官方这里文档是链接Angular 2 form validation

下面是我的HTML表单和编译器输出

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输出

在此先感谢

维克拉姆

来源

2016-12-05 Sharma Vikram

我想这是从'[hidden] =“！mobile.valid.required”'。 –

我也尝试mobile.errors.required但同样的错误返回 –

然后我不知道。 –

它看起来的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

来源

2016-12-12 15:19:06

-1

这里是我的回答，存在未mobile.errors对象下找到所需要的实际问题。下面是我的单行代码。

!mobile.errors['required']

如果没有找到对象字段，那么我们将其用作模板中的数组。

来源

2016-12-13 08:21:01

通过这行代码，您正在使用原始Javascript地图而不是打字稿对象（即布尔值）。这是一种解决方法。 –

错误1068：类型角度2（AOT）上不存在属性

回答

相关问题