错误类型错误：无法读取角度 5 中未定义的属性“错误”

Question

我使用了 formArray，现在我正在对数组字段进行验证。下面是我的代码，但是当我点击提交时，我得到了

ERROR TypeError：无法读取未定义的属性“错误”。

html 的第一行在控制台上以红色突出显示。请告诉我真正的原因。

app.component.html

  <div *ngFor="let items of contractList.controls; let i=index" 
                [formGroupName]="i">
    <table>
    <thead></thead>
    <tbody>
    <tr> 
     <td>
        <div class="form-group col-xs-6">
          <label for="copay">Copay Amount:</label>
          <input formControlName="copay" placeholder="Copay Amount" class="form-control" name="copay" id="copay" [ngClass]="{ 'is-invalid': submitted && items.get('copay').errors }">
        <div *ngIf="submitted && items.get('copay').errors" class="invalid-feedback">
                                <div *ngIf="items.get('copay').errors.required">Copay is required</div>
                            </div>
        </div>
        </td>

app.component.ts

 get contractList() {
         return this.addForm.get('contractServiceList') as FormArray;
      }
      constructor(public formBuilder: FormBuilder, public router:
        Router, public activatedRoute: ActivatedRoute, public contractService: ContractService) {
      }
    get f() { return this.addForm.controls; }

       arrayValidator() {
        return (control: FormArray) => {
          return null;
         }
      }
      createForm(data: any): FormGroup {
        return this.formBuilder.group({
          contractName: [data ? data.contractName : '', Validators.required],
          contractServiceList: this.formBuilder.array(
                 this.createContractService(data ? data.contractServiceList : null),this.arrayValidator()
                  )
          });
      }
      createContractService(data: any[]|null): FormGroup[] {
        return data ?
          data.map(x => {
            let group = this.formBuilder.group({
              serviceId: [x.serviceId, Validators.required],
              copay: [x.copay, Validators.required],
              coinsurance: [x.coinsurance, Validators.required],
              deductibleApplies: [x.deductibleApplies, Validators.required],
              penaltyApplies: [x.penaltyApplies, Validators.required],
              penaltyRule: [x.penaltyRule, Validators.required],
              penaltyType: [x.penaltyType, Validators.required],
              penaltyValue: [x.penaltyValue, Validators.required],
              deductibleAppliesPenalty: [x.deductibleAppliesPenalty, Validators.required]
                });
            return group;
          }) :
          [this.formBuilder.group(
            {
              serviceId: ['', Validators.required],
              copay: ['', Validators.required],
              coinsurance: ['', Validators.required],
              deductibleApplies: ['', Validators.required],
              penaltyApplies: ['', Validators.required],
              penaltyRule: ['', Validators.required],
              penaltyType: ['', Validators.required],
              penaltyValue: ['', Validators.required],
              deductibleAppliesPenalty: ['', Validators.required]
            })];
      }
      ngOnInit() {
         {
        this.addForm = this.createForm(null);
      }
      }

      onSubmit() {
        this.submitted = true;
        console.log(this.addForm.value);
        if (this.addForm.invalid) {
                return;
            }
        this.contractService.saveContract(this.addForm.value)
          .subscribe( data => {
            if ( window.confirm('Contract created successfully') ) {
              this.addForm.reset();
            }

Answer 1

试试这样的：

这里使用数组Index获取控件的表单数组

我假设 form 为 addForm，formarray 为 contractServiceList

addForm.controls.contractServiceList.controls[i].controls.copay.errors

或者

addForm.controls.contractServiceList['controls'][i].get('copay').errors

HTML：

<div *ngFor="let items of contractList.controls; let i=index" [formGroupName]="i">
    <table>
        <thead></thead>
        <tbody>
            <tr>
                <td>
                    <div class="form-group col-xs-6">
                        <label for="copay">Copay Amount:</label>
                        <input formControlName="copay" placeholder="Copay Amount" class="form-control" name="copay" id="copay">
                        <div *ngIf="addForm.controls.contractServiceList.controls[i].controls.copay.errors.required">Copay is required</div>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>