根据if条件选择mat-option

Question

我想基于if条件进行mat-option预先检查。

 <div class='form'> <mat-form-field color='accent'> <!-- if UserAccount is not null, 'Yes' should be pre selected --> <mat-select class='form-control' placeholder='user account exists' [(ngModel)]='UserAccountExists' name='UserAccountExists' required value=! data.UserAccount.trim() ? "Yes" : "No"> <mat-option [value]='"Yes"'>Yes </mat-option> <mat-option [value]='"No"'>No </mat-option> </mat-select> <mat-error *ngIf='formControl.invalid'>{{getErrorMessage()}}</mat-error> </mat-form-field> </div> <!-- if "Yes" is selected, this field is 'required' --> <div class='form'> <mat-form-field color='accent'> <input matInput #inputstate class='form-control' placeholder='Username' [(ngModel)]='data.username' name='Username' required> <mat-error *ngIf='formControl.invalid'>{{getErrorMessage()}}</mat-error> </mat-form-field> </div> 

1. 第一个<div> ：如果存在UserAccount ，则应预先选中"Yes" 。

2. 如果选择"Yes" ，则在第二个<div> ， required <input>

有人可以帮忙吗？

谢谢

Answer 1

<mat-select class='form-control' placeholder='user account exists' [(ngModel)]='UserAccountExists' name='UserAccountExists' required>
  <mat-option value="Yes">Yes </mat-option>
  <mat-option value="No">No </mat-option>
</mat-select>

...

<input matInput class='form-control' placeholder='Username' [(ngModel)]='data.username' name='Username' [required]="UserAccountExists === 'Yes'">

在组件中，一旦您获取了数据：

this.UserAccountExists = !!data.UserAccount ? 'Yes' : 'No';