我无法使用嵌入在 Angular 4 响应式表单中的选择在隐藏和显示控件之间切换。以下显示了问题:https://plnkr.co/edit/s7wYqy3Oa9eGmvOY3sNX?p=preview .如果您选择“名称”选项,地址字段将按预期隐藏。如果您之后选择“姓名和地址”选项,则不会显示。
这是组件的模板:
<form [formGroup]="myForm" novalidate="">
<div class="form-group">
<label>Choose</label>
<select class="form-control" formControlName="isNameOnly">
<option *ngFor="let option of options" [value]="option.value">
{{option.name}}
</option>
</select>
</div>
<div class="form-group">
<label>Name</label>
<input class="form-control" formControlName="name" />
</div>
<div class="form-group" [hidden]="myForm.controls.isNameOnly.value">
<label>Address</label>
<input class="form-control" formControlName="address" />
</div>
<pre>{{myForm.controls.isNameOnly.value}}</pre>
</form>
这里是组件的定义:
import { Component, Input, OnChanges } from '@angular/core';
import { FormArray, FormBuilder, FormGroup } from '@angular/forms';
@Component({
selector: 'my-form',
templateUrl: './form.component.html'
})
export class MyFormComponent implements OnChanges {
myForm: FormGroup;
options = [
{name: 'Name Only', value: true},
{name: 'Name and Address', value: false}
];
constructor(
private fb: FormBuilder
) {
this.myForm = this.fb.group({
name: '',
address: '',
isNameOnly: false
});
}
ngOnChanges() {}
}
最佳答案
更新隐藏到以下检查真实字符串
[hidden]="myForm.controls.isNameOnly.value == 'true'"
https://plnkr.co/edit/7ub2fy7CBdBA46i4qkvv?p=preview
我相信 myForm.controls.isNameOnly.value
返回一个字符串并且 [hidden]
将其作为表达式求值,因为“true”或“false”都是非空字符串,所以 hidden 总是 true
关于angular - 无法使用 Select 以 Angular 4 react 形式隐藏然后显示控件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45357397/