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

Question

У меня есть один выпадающий список.Основываясь на выборе раскрывающегося списка, мне нужно отобразить некоторые столбцы вместе с существующими столбцами, которые являются общими для каждого выбора.

My html:

<mat-form-field class="col-xl-6 col-lg-3 col-md-3 col-sm-12 col-xs-12">
      <mat-select [(ngModel)]="selectedValue" placeholder="EntityName" (selectionChange)="changeEntity($event.value)" [ngModelOptions]="{standalone: true}">
        <mat-option *ngFor="let type of types" [value]="type.viewValue">
          {{type.viewValue}}
        </mat-option>
      </mat-select>
    </mat-form-field>

 <div *ngIf="selectedValue === 'One'" class="row formGroup">
    <mat-form-field class="example-full-width" class="col-xl-6 col-lg-3 col-md-3 col-sm-12 col-xs-12">
      <input matInput placeholder=" OneID" type="text" id="oneid" formControlName="oneid">
    </mat-form-field>
  </div>

  <div class="row formGroup">
    <mat-form-field class="example-full-width" class="col-xl-6 col-lg-3 col-md-3 col-sm-12 col-xs-12">
      <input matInput placeholder="Name" type="text" id="commonname" formControlName="commonname">

      </div>
    </mat-form-field>
<div class="formGroup" *ngIf="selectedValue === 'Two'"
    <mat-form-field class="example-full-width" class="col-xl-6 col-lg-3 col-md-3 col-sm-12 col-xs-12">
      <input matInput  type="text" id="username" formControlName="twoname">
    </mat-form-field>
 </div>

My Ts File:

  myForm = this.fb.group( {
    oneid: ['', Validators.required],
     commonname: ['', Validators.required],
     oneid: ['', Validators.required],
     twoname:['',Validators.required],

   })

 get f() {

    return this.myForm.controls;
 }
 if (this.myForm.invalid) {
  console.log("invalid");
  return;
} 

Итак, MyСомнение, как будет делать проверку?Если я сохраню имя formcontrol для отдельных полей, моя форма будет возвращена неверно.Как я могу сделать проверки для этого вложенного ввода и получить значение каждого поля ввода, не имея отдельных имен formcontrol?Пожалуйста, ведите меня.

Answer 1

Вам не нужно избегать имен formcontrol.Вам нужна динамическая проверка.

Внутри вашего onSubmit() метода изменяются правила проверки динамически.Вы можете написать код, подобный следующему:

if(some-condition) {
this.entityForm.get('eid').clearValidators();
this.entityForm.get('principalEntity').clearValidators();
this.entityForm.get('tel').clearValidators();
this.entityForm.get('rilid').clearValidators();

this.entityForm.get('eid').updateValueAndValidity();
this.entityForm.get('principalEntity').updateValueAndValidity();
this.entityForm.get('tel').updateValueAndValidity();
this.entityForm.get('rilid').updateValueAndValidity();
}

Обратите внимание, что вам нужно очистить правила проверки для определенных элементов управления, основанные на некоторых условиях, вызвав clearValidators().Кроме того, вам нужно позвонить updateValueAndValidity(), чтобы они могли быть переоценены.