角度构建失败创建生产版本

Question

我在运行 ng build --prod有以下错误

当这是编译工作，为ng build和ng server

错误在NG：{PATH} /仪表/促销/加推广/促销 - form.component.html（33,13）：属性'controls'在类型'AbstractControl'上不存在。

ERROR in ng:{path}/dashboard/promotions/add-promotion/promotion-form.component.html (33,13): Property 'controls' does not exist on type 'AbstractControl'. 

ERROR in ng:{path}/dashboard/promotions/add-promotion/promotion-form.component.html (45,13): Property 'controls' does not exist on type 'AbstractControl'. 

ERROR in ng://{path}/dashboard/promotions/add-promotion/promotion-form.component.html (45,13): Property 'controls' does not exist on type 'AbstractControl'. 

下面是我的组件表单生成器和HTML

this.promotionForm = this.fb.group({ 
     'id':[null], 
     'title': [null, Validators.compose([Validators.required, Validators.maxLength(50), 
     Validators.pattern('[a-zA-Z ]*'), Validators.required,Validators.minLength(1)])], 
     'description': [null, Validators.compose([Validators.required])], 
     'imageSrc': [null, [Validators.required]], 
     'contactPerson' : this.fb.group({ 
          'name': [null, [Validators.required]], 
          'email': [null, [Validators.required,Validators.pattern(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/)]], 
          'phone': [null, [Validators.required, 
          Validators.pattern(/^[0-9]{10}$/)]] 
         }), 
    }); 

的HTML组件

<form [formGroup] ="promotionForm" (submit)="submit(promotionForm.value)"> 
    <--Top Form fields--> 
    <table class="full-width" cellspacing="0"> 
    <tr > 
     <div formGroupName="contactPerson"> 
     <td > 
      <md-input-container class="full-width"> 
      <input mdInput 
        formControlName="name" 
        placeholder="Sales Person" [ngModel]="promoData?.contactPerson.name" 
        [formControl]="promotionForm.controls['name']"> 
      <div *ngIf="!promotionForm.controls.contactPerson.controls.name.valid 
          && (promotionForm.controls.contactPerson.controls.name.dirty)"> 
       <span class="primary">Please enter a valid name.</span> 
      </div> 
      </md-input-container> 
     </td> 
     <td> 
      <md-input-container class="full-width"> 
      <input mdInput formControlName="phone" 
        placeholder="Mobile Number" [ngModel]="promoData?.contactPerson.phone" 
      [formControl]="promotionForm.controls['phone']"> 
      <div *ngIf="!promotionForm.controls.contactPerson.controls.phone.valid 
          && (promotionForm.controls.contactPerson.controls.phone.dirty)"> 
       <span class="primary">Please enter a valid phone number.</span> 
      </div> 
      </md-input-container> 
     </td> 
     <td> 
      <md-input-container class="full-width"> 
      <input mdInput formControlName="email" 
        placeholder="Email Address" [ngModel]="promoData?.contactPerson.email"> 

      <div *ngIf="!promotionForm.controls.contactPerson.controls.email.valid 
          && (promotionForm.controls.contactPerson.controls.email.dirty)"> 
       <span class="primary">Please enter a valid email.</span> 
      </div> 
      </md-input-container> 
     </td> 
     </div> 
    </tr> 
    </table> 
....</form> 

Answer 1

一般情况下，你不应该访问这样的控制，这是你应该什么做：

change

promotionForm.controls['name'] 

到

promotionForm.get('name') 

，改变

promotionForm.controls.contactPerson.controls.phone 

到

promotionForm.get('contactPerson.phone') 

发现别人并修复它们。