angular - 无法使用 Select 以 Angular 4 react 形式隐藏然后显示控件

Question

我无法使用嵌入在 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() {}
}

Answer 1

更新隐藏到以下检查真实字符串

[hidden]="myForm.controls.isNameOnly.value == 'true'"

https://plnkr.co/edit/7ub2fy7CBdBA46i4qkvv?p=preview

我相信 myForm.controls.isNameOnly.value 返回一个字符串并且 [hidden] 将其作为表达式求值，因为“true”或“false”都是非空字符串，所以 hidden 总是 true