Опция mat выбрана исходя из условия if

Question

Я хочу сделать предварительно проверенную опцию mat на условии if.

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