Question

我有一个嵌套嵌套的嵌套表单数组（experiencesArray），其中包含表单控件（公司名称），如下所示。

debug.explain.structured=true

和体验表单组如下所示

 this.personalFormGroup = this._formBuilder.group({
 professionalInfo: this._formBuilder.group({
 totalexpyears: ['', Validators.required],
   })
  experiencesArray:this._formBuilder.array([this.experiences()])
    })

在这里，我必须根据专业表单组中的totalexpyears值设置验证器，我的意思是，如果值大于0，则必须为companyName设置所需的验证器，否则就不会。我有下面的工作来设置验证器。

  experiences(): FormGroup {
    return this._formBuilder.group({
      companyName: [''],
    })
  }

还有一件事是totalexpyears字段是材料下拉列表，我的模板如下所示。

workexperiance(value){
  const expvalidation = <FormControl>this.personalFormGroup.get('professionalInfo').get('experiencesArray.expDesignation');
  this.personalFormGroup.get('professionalInfo').get('totalexpyears').valueChanges.subscribe((value)=>{
    console.log("inside value",value);
    if(value > 0){
      this.totalexpyrsval = true; 
      console.log("inside value greater dan 0", this.totalexpyrsval);
    expvalidation.setValidators([Validators.required]);
  }
  if(value == 0){
    this.totalexpyrsval = false; 
    console.log("inside value lesser dan 0", this.totalexpyrsval);
    expvalidation.clearValidators();
  }
  expvalidation.updateValueAndValidity();
});
}

我收到类似下面的错误

<form [formGroup]="personalFormGroup">
      <div formGroupName="professionalInfo">

     <mat-form-field>
              <mat-select (selectionChange)="workexperiance($event.value)" formControlName="totalexpyears" placeholder="Total Exp yrs *" class="select">
                <mat-option *ngFor="let exp of experiance" [value]="exp">
                  {{exp}}
                </mat-option>
              </mat-select>
              <mat-error *ngIf="(personalFormGroup.get('professionalInfo').get('totalexpyears').errors)">
                <mat-error *ngIf="(personalFormGroup.get('professionalInfo').get('totalexpyears').errors.required && personalFormGroup.get('professionalInfo').get('totalexpyears').touched)">
                  Experience is required
                </mat-error>
              </mat-error>
            </mat-form-field>  



   <div class="design" *ngIf = "this.totalexpyrsval">
      <div class="form-group row">
        <label class="col-md-3 form-control-sm">Work Experience</label>
        <div class="col-md-9">
          <table class="table-striped table-bordered table-responsive">
            <tr class="form-control-sm">
              <th>Company Name</th>
            </tr>
            <tr formArrayName="experiencesArray" *ngFor="let exp of personalFormGroup['controls'].professionalInfo['controls'].experiencesArray['controls']; let i=index;">
              <td [formGroupName]="i">
                <input type="text" class="form-control form-control-sm" formControlName="expCompanyName" />

                  <div *ngIf="(exp.get('expCompanyName').errors)">
                  <div *ngIf="exp.get('expCompanyName').errors.required && (exp.get('expCompanyName').dirty || exp.get('expCompanyName').touched)">
                    <small class="text-danger">
                      Enter company name
                    </small>
                  </div>
                </div>

              </td>
            *ngIf="personalFormGroup.controls.professionalInfo.controls.experiencesArray.controls.length == (i+1)">
                <button class="btn btn-primary btn-sm" (click)="addExperience()" [disabled]="this.toggle" style="background:#3f51b5">Add</button>
              </td>
              <td *ngIf="personalFormGroup.controls.professionalInfo.controls.experiencesArray.controls.length > (i+1)">
                <button class="btn btn-danger btn-sm" (click)="deleteExperience(i)" [disabled]="this.toggle" style="background:#f44336">Delete</button>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>

我想根据经验值设置所需的验证器，而不是专注于标签等一切正常的事情，而只专注于设置验证器。

Answer 1

      workexperiance1(value) {
        const expyrs = this.personalFormGroup.controls['professionalInfo'].get('totalexpyears').value;
        const expvalidation = <FormArray>this.personalFormGroup.get('professionalInfo.experiencesArray');
        if (value > 0 ) {
         this.totalexpmonthval = true;

         console.log("selected month value", value);
         expvalidation.at(0).get('expCompanyName').setValidators([Validators.required]);

       }
        if(value == 0 ){
                 this.totalexpmonthval = false; 
                 this.totalexpyrsval = false; 
                 expvalidation.at(0).get('expCompanyName').clearValidators();
    }
 expvalidation.at(0).get('expCompanyName').updateValueAndValidity();
}

上面的代码运行正常。

如何在Angular 6中为反应式表单中的表单组的嵌套嵌套嵌套表单控件设置验证器

1 个答案: