Question

我已经编写了验证页面的代码，但出现类似“无法读取未定义的属性”的错误。请任何人帮助我这段代码。如果有错，请更正任何一个。

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])]
          });
    }

Answer 1

您实际上在 FormGroup 中有一个 FormArray （子目标），并且2个字段（criteria_name和criteria_weightage）都在FormArray中...因此您必须访问请先遍历子目标，然后再进入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

无法读取angular6反应形式中未定义的属性“接触”

1 个答案: