角度構建失敗創建生產版本

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') 

發現別人並修復它們。