以角度验证下拉菜单，如果从第二个下拉菜单中选择的值为是，则第三个下拉菜单应强制进行验证

Question

我正在对下拉列表进行验证。我有三个下拉菜单。 1）第一个和第二个下拉菜单是强制性的，但是对于第三个下拉菜单，我需要为它编写一个逻辑 如果值为“是”，则逻辑适用于第二个下拉列表，那么第三个下拉列表应标记为强制，否则不需要。 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 的标志，并在你的 select-form-example.ts 中将其设置为 false

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

最后在您的 select-form-example.html 中添加第三个选择和 [required]='selectRequired'

这取决于 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>