无法读取 angular6 反应形式中未定义的属性“已触及”答案

【问题标题】：Cannot read property 'touched' of undefined in angular6 reactive forms无法读取 angular6 反应形式中未定义的属性“已触及”
【发布时间】：2019-05-27 04:04:57
【问题描述】：

我已经编写了代码来验证页面，但是我收到了类似“无法读取未定义的属性”“触摸”的错误。请任何人帮助我这个代码。如果错了，请任何人纠正。

html:

<div class="container pt-4">
    <form [formGroup]="goalForm" (submit)="submit()">
        <div class="card">
            <div class="card-header">Sub Goals</div>
            <div class="card-body" formArrayName="subgoals">
                <div *ngFor="let goal of goalForm.controls.subgoals.controls; let i=index">
                    <div [formGroupName]="i" class="row">
                        <div class="form-group col-sm-3">
                            <label for="name">Criteria Name *</label>
                            <input class="form-control" formControlName="criteria_name" type="text" 
                                    id="criteria_name" name="criteria_name" 
                                    placeholder="Criteria Name">
                            <span class="text-danger" *ngIf="goalForm.controls['criteria_name'].touched 
                                    && goalForm.controls['criteria_name'].hasError('required')">
                                    Criteria Name is required! </span>
                        </div>                            
                        <div class="form-group col-sm-3">
                            <label for="weightage">Criteria Weightage *</label>
                            <input class="form-control" formControlName="criteria_weightage" type="number" 
                                    id="criteria_weightage" name="criteria_weightage" 
                                    placeholder="Criteria Weightage">
                            <span class="text-danger" *ngIf="goalForm.controls['criteria_weightage'].touched 
                                    && goalForm.controls['criteria_weightage'].hasError('required')">
                                    Criteria Weightage is required! </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>     
    </form>
</div>

kpa-goal.component.ts:

 ngOnInit(){
        this.goalForm = this.fb.group({
            subgoals :this.fb.array([
              this.initgoal(),
            ])
          });
    }
    initgoal(){
        return this.fb.group({
          criteria_name: [null,Validators.compose([Validators.required])],
          criteria_weightage: [null,Validators.compose([Validators.required])]
          });
    }

【问题讨论】：

标签： angular twitter-bootstrap typescript angular6 angular-reactive-forms

【解决方案1】：

您实际上在 FormGroup 中有一个 FormArray（子目标），并且 2 个字段（criteria_name 和 criteria_weightage）在 FormArray 中...所以您必须访问2 个字段，先遍历子目标，然后才能到达 2 个字段（criteria_name 和 criteria_weightage）。

相关HTML：

<div class="container pt-4">
        <form [formGroup]="goalForm" (submit)="submit()">
            <div class="card">
                <div class="card-header">Sub Goals</div>
                <div class="card-body" formArrayName="subgoals">
                    <div *ngFor="let goal of goalForm.controls.subgoals.controls; let i=index">
                        <div [formGroupName]="i" class="row">
                            <div class="form-group col-sm-3">
                                <label for="name">Criteria Name *</label>
                  <input class="form-control" formControlName="criteria_name" type="text" 
                          id="criteria_name" name="criteria_name" 
                          placeholder="Criteria Name">
                          <span class="text-danger" *ngIf="goalForm.controls.subgoals.controls[0].controls.criteria_name.touched && goalForm.controls.subgoals.controls[0].controls.criteria_name.errors?.required" >
                          Criteria Name is required! 
                          </span>
              </div>                            
              <div class="form-group col-sm-3">
                  <label for="weightage">Criteria Weightage *</label>
                  <input class="form-control" formControlName="criteria_weightage" type="number" 
                          id="criteria_weightage" name="criteria_weightage" 
                          placeholder="Criteria Weightage">
                          <span class="text-danger" *ngIf="goalForm.controls.subgoals.controls[0].controls.criteria_weightage.touched && goalForm.controls.subgoals.controls[0].controls.criteria_weightage.errors?.required" >
                          Criteria Weightage is required!
                          </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>     
    </form>
</div>

完成工作demo on stackblitz here

【讨论】：