Question

我在运行ng build --prod时出现以下错误，这是ng build和ng server的编译工作

ng中的错误：{path} /dashboard/promotions/add-promotion/promotion-form.component.html(33,13）：'AbstractControl'类型中不存在属性'controls'。

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

通常，你不应该访问这样的控件，这是你应该做的：

更改

 promotionForm.controls['name']

到

 promotionForm.get('name')

并更改

  promotionForm.controls.contactPerson.controls.phone

到

 promotionForm.get('contactPerson.phone')

找到其他人并修复它们。

创建生成构建时角度构建失败

1 个答案: