Как установить валидаторы для вложенных вложенных вложенных элементов управления формами групп форм в реактивных формах в Angular 6

У меня есть вложенный массив вложенных вложенных форм (experiencesArray), который содержит элементы управления формой (имя компании), как показано ниже.

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

и группы опыта, как показано ниже

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

Здесь я должен установить валидаторы на основе значения totalexpyears, которое находится в группе профессиональных форм, я имею в виду, что если значение больше 0, тогда я должен установить требуемый валидатор для companyName, иначе нет. у меня есть работа, как показано ниже, для установки валидаторов.

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

здесь еще одна вещь: поле totalexpyears - это раскрывающийся список материалов, и мой шаблон, как показано ниже.

<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>

я получаю сообщение об ошибке, как показано ниже

ERROR TypeError: Cannot read property 'setValidators' of null
   at steppar.component.ts:590
    at SafeSubscriber.schedulerFn [as _next] (core.js:13516)
    at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:194)
    at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (Subscriber.js:132)
    at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next (Subscriber.js:76)
    at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:53)
    at EventEmitter.push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next (Subject.js:47)
    at EventEmitter.push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit (core.js:13488)
    at FormControl.push../node_modules/@angular/forms/fesm5/forms.js.AbstractControl.updateValueAndValidity (forms.js:2897)
    at FormControl.push../node_modules/@angular/forms/fesm5/forms.js.FormControl.setValue (forms.js:3275)

Я хочу установить требуемый валидатор на основе значения опыта и не сосредотачиваться на тегах и т. Д., Все работает нормально, только концентрироваться на настройке валидаторов.


javascript bootstrap-4 angular6 angular-material-6
person pk_teckie    schedule 22.02.2019    source источник
comment
expvalidation не существует в том виде, в котором вы его назначили. Это выглядит неправильно: const expvalidation = <FormControl>this.personalFormGroup.get('professionalInfo').get('experiencesArray.expDesignation'); Должно быть что-то вроде: experiencesArray[0].expDesignation.   -  person G. Tranter    schedule 23.02.2019

Ответы (1)


arrow_upward
0
arrow_downward 

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

приведенный выше код работает абсолютно нормально.

person pk_teckie    schedule 27.02.2019