根据 if 条件选择垫选项

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>

第一个<div>：如果UserAccount存在，则应预先检查"Yes"。
如果选择"Yes"，在第二个<div>中，<input>就是required

有人可以帮忙吗？

谢谢

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

根据 if 条件选择垫选项

mat-option selected base on if condition

typescript

angular-ng-if

angular-material2

angular