根据 yes/no 单选按钮选择添加和删除 Angular 表单的输入

Question

我正在尝试根据 yes/no 单选按钮选择 add/remove 来自 Angular 表单的输入。

目前我已经用 ngIf 指令做到了，但是当我看到时，属性保留在表单的 JSON 对象中，并且表单连续保持无效。

请提供任何建议，以在选择 no 选项时明确删除输入，或者向我提出更好的方法。

GitHub 回购：https://github.com/jreategui07/form-test

提前致谢！

Answer 1

您可以根据单选值的变化在表单中添加和删除控件

//Add:
this.formTest.addControl('phoneNumber',['', Validators.required]);

//Remove:
this.formTest.removeControl('phoneNumber');

Angular 表格组: https://angular.io/api/forms/FormGroup

更新：

this.formTest.addControl('phoneNumber',new FormControl('',[Validators.required]));

Answer 2

按照下面的代码很容易：->

 <input name="options"  [(ngModel)]="options" type="radio" [value]="true" [checked]="options"/> Yes

 <input name="options"[(ngModel)]="options" type="radio" [value]="false" [checked]="!options"/> No

 <div *ngIf="options">
<input name="displaying input if its true">
</div>
 <div *ngIf="!options">
<input name="displaying input if its false"> // In your case don't display input.
</div>

根据 yes/no 单选按钮选择添加和删除 Angular 表单的输入

Add and remove input of Angular form according to yes/no radio-button selection

formbuilder

angular

angular-reactive-forms