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

Question

Я делаю проверку для выпадающих.У меня есть три выпадающих.1) 1-й и 2-й выпадающие списки являются обязательными, но для 3-го выпадающего списка мне нужно написать логику для них, а для 2-го выпадающего списка логика предназначена, если значение равно «да», тогда 3-й выпадающий список следует пометить как обязательный, иначе не требуется.2) У меня есть кнопка сброса, и она должна сбросить значения.Я пытался, но не смог найти душу.Пожалуйста, кто-нибудь может мне помочь в этом ??Заранее спасибо ..

export class AppComponent  {
  PepPartner : "";
  PepBlacklisted : "";
  Blacklist : "";
  public formGroup: FormGroup;
  constructor(private fb: FormBuilder) {}

   screenofAML() {
    let self = this;
    this.formGroup = this.fb.group({

       PepPartner :['',Validators.required],
      PepBlacklisted :['',Validators.required],
      Blacklist :['',Validators.required],

    });
  }


  validateForm() {
    if (this.formGroup.invalid) {
      this.formGroup.get('PepPartner').markAsTouched();
      this.formGroup.get('PepBlacklisted').markAsTouched();
      this.formGroup.get('Blacklist').markAsTouched();
           return;
    }
    else {
      const dataObj = {
       PepPartner:this.formGroup.get('PepPartner').value,
        PepBlacklisted:this.formGroup.get('PepBlacklisted').value,
        Blacklist :this.formGroup.get('Blacklist').value,

      }

    }

}

 onResetClick() {
    this.PepPartner = "";
   this. PepBlacklisted = "";
   this.Blacklist ="";
  }

}



<div class ="space">
<mat-form-field>
     <mat-label>Is this partner a PEP?</mat-label>
     <mat-error *ngIf="formGroup.get('PepPartner').hasError('required')">
        PEP Partner  is required
      </mat-error>
  <mat-select disableRipple  [(ngModel)]="PepPartner" formControlName="PepPartner">
      <mat-option ></mat-option>
    <mat-option value="1">Yes</mat-option>
    <mat-option value="2">No</mat-option>
  </mat-select>
</mat-form-field>

<mat-form-field>
  <mat-label>Does this partner blacklisted</mat-label>
  <mat-error *ngIf="formGroup.get('PepBlacklisted').hasError('required')">
      Partner blacklisted is required
    </mat-error>
  <mat-select disableRipple  [(ngModel)]="PepBlacklisted" formControlName="PepBlacklisted" >
    <mat-option ></mat-option>
    <mat-option value="1">Yes</mat-option>
    <mat-option value="2">No</mat-option>
  </mat-select>
</mat-form-field>

<mat-form-field >
       <mat-error *ngIf="formGroup.get('Blacklist').hasError('required')">
      Blacklisted is required
      </mat-error>

    <input matInput  placeholder="Blacklist(s)"  [(ngModel)]="Blacklist" formControlName="Blacklist" >

  </mat-form-field>

  <div class="button-position">
      <div class="text-right pr-0 pb-2">
        <div class="btn-group">
          &nbsp;&nbsp;&nbsp;
          <button type="button" id="button1" mat-raised-button class="text-uppercase app-btn app-btn-

  primary-border app-color-primary"
         (click)="validateForm()" >Save</button>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <button type="button" id="button2" mat-raised-button class="text-uppercase app-btn app-btn-

  primary-border app-color-primary"
            (click)="onResetClick()">Clear</button>
        </div>
      </div>
    </div>

Answer 1

Я бы добавил флаг типа selectRequired и установил бы его false в вашем select-form-example.ts

selectRequired = false;

После в функции changeClient2

changeClient2(data){
alert("selected --->"+this.clients[data].id+' '+this.clients[data].clientName);
  // here you can check that it's value yes/no
  this.clients[data].id === 'id2' ? this.selectRequired = true : this.selectRequired = false;
}

Наконец добавьте 3-й выбори [обязательный] = 'selectRequired' в вашем select-form-example.html

Это зависит от того, является ли selectRequired истинным или ложным

<mat-form-field>
<mat-select placeholder="Clients" [(ngModel)]="selectedValue3" name="food" (change)="changeClient2($event.value)" [required]='selectRequired'>
  <mat-option *ngFor="let client of clients; let i = index;" [value]="i">
    {{client.clientName}}
  </mat-option>
</mat-select>