Kann nicht ausblenden Zeigen Sie dann Steuerelement in 4 reaktive Form mit Auswahl

Question

Ich bin nicht in der Lage, zwischen dem Ausblenden und Anzeigen eines Steuerelements mit einer Auswahl in einer reaktiven Form Angular 4 eingebettet anzuzeigen. Das Folgende zeigt das Problem: https://plnkr.co/edit/s7wYqy3Oa9eGmvOY3sNX?p=preview. Wenn Sie die Option "Name" auswählen, wird das Adressfeld wie erwartet ausgeblendet. Wenn Sie anschließend die Option "Name und Adresse" auswählen, wird sie nicht angezeigt. Hier

ist die Vorlage für die Komponente:

<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> 

Hier ist die Definition der Komponente:

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

aktualisieren versteckt auf die folgende Überprüfung der wahren Zeichenfolge

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

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

Ich glaube myForm.controls.isNameOnly.value einen String zurückgibt und [hidden] wertet es als Ausdruck und da „true“ oder „false“ beide nicht leere Zeichenfolgen sind, ist so versteckt immer wahr