Angular 2动态表单可以通过使用条件语句来根据一个字段的值显示或隐藏另一个字段。下面是一个实现此功能的示例:
<div>
<label for="field1">字段1:</label>
<input type="text" id="field1" [(ngModel)]="field1Value">
</div>
<div *ngIf="field1Value === 'show'">
<label for="field2">字段2:</label>
<input type="text" id="field2" [(ngModel)]="field2Value">
</div>
在上面的示例中,当字段1的值为'show'时,字段2会显示出来。
import { Component } from '@angular/core';
@Component({
selector: 'app-form',
templateUrl: './form.component.html',
styleUrls: ['./form.component.css']
})
export class FormComponent {
field1Value: string;
field2Value: string;
}
在上面的示例中,field1Value和field2Value分别对应字段1和字段2的值。
这样,当字段1的值改变时,Angular会自动检测到变化并根据条件语句来显示或隐藏字段2。
领取专属 10元无门槛券
手把手带您无忧上云