angular6:如何在隐藏和显示表单控件之间切换
angular6: How to toggle between hiding and showing a form control
我无法使用嵌入 Angular6 反应形式的 select 在隐藏和显示控件之间切换。我希望当用户 select 选项 3 在 garde form controll 中显示名称 form controll。
this.form = this.fb.group({
id: [null, Validators.compose([Validators.required])],
name: [null, Validators.compose([Validators.required])],
grade: [null, Validators.compose([Validators.required])],
});
.html
<mat-form-field class="mb-1">
<input matInput " [formControl]="form.controls['id']">
</mat-form-field>
<mat-form-field class="mb-1">
<mat-select [formControl]="form.controls['grade']">
<mat-option value="option1">option1</mat-option>
<mat-option value="option2">option2</mat-option>
<mat-option value="option3">option3</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="mb-1">
<input matInput " [formControl]="form.controls['name']">
</mat-form-field>
最快的解决方案是,虽然不是很优雅:
<mat-form-field class="mb-1" *ngIf="form.controls['grade'].value == 'option3'">
<input matInput [formControl]="form.controls['name']">
</mat-form-field>
我无法使用嵌入 Angular6 反应形式的 select 在隐藏和显示控件之间切换。我希望当用户 select 选项 3 在 garde form controll 中显示名称 form controll。
this.form = this.fb.group({
id: [null, Validators.compose([Validators.required])],
name: [null, Validators.compose([Validators.required])],
grade: [null, Validators.compose([Validators.required])],
});
.html
<mat-form-field class="mb-1">
<input matInput " [formControl]="form.controls['id']">
</mat-form-field>
<mat-form-field class="mb-1">
<mat-select [formControl]="form.controls['grade']">
<mat-option value="option1">option1</mat-option>
<mat-option value="option2">option2</mat-option>
<mat-option value="option3">option3</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="mb-1">
<input matInput " [formControl]="form.controls['name']">
</mat-form-field>
最快的解决方案是,虽然不是很优雅:
<mat-form-field class="mb-1" *ngIf="form.controls['grade'].value == 'option3'">
<input matInput [formControl]="form.controls['name']">
</mat-form-field>