角度材质:如何根据复选框隐藏输入字段

Question

我有一个复选框cbAddVestingOption，当选中时，它应该显示一个输入字段。

<mat-form-field style="width: 600px">
<mat-checkbox [formcontrolname]="cbAddVestingOption" style="padding-bottom: 200px;">Add Vesting Option</mat-checkbox>
<input type="text" placeholder="Vesting Option" matInput formcontrolname="vestedoption" [matAutocomplete]="auto" class="uppercase" />
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let option of vestedOptions" [value]="option">
{{option}}
</mat-option>
</mat-autocomplete>
</mat-form-field>

因此，当选中cbAddVestingOption时，应该显示vestedoption。当cbAddVestingOption未被检查时，vestedoption应被隐藏。

我需要在打字脚本中这样做吗？还是可以在html中这样做？

Answer 1

您可以直接在模板上这样做：

<mat-checkbox #checkbox>Add Vesting Option</mat-checkbox>
<input type="text" placeholder="Vesting Option" matInput [hidden]="!checkbox.checked"/>

添加：一个更好的选项，在整个<mat-form-field>:上使用*ngIf

<mat-checkbox #checkbox>Add Vesting Option</mat-checkbox>
<mat-form-field *ngIf="checkbox.checked" style="width: 600px">
<input type="text" placeholder="Vesting Option" matInput formControlName="vestedoption" [matAutocomplete]="auto" />