、フィールドはangular2/NG2ためngIf

Question

を使用して隠されているとき、フィールドは私ができたngIf

を使用して隠されているときに、モデルの値をクリアするためにどのような方法があるモデル値をクリアする方法がありますこれはangularjsで行いますが、angular2/ng2に対して誰でも私にいくつかのアイデアを与えることができます。とても有難い。

あなたがコントロールとその updateValueを活用またはそれを行うために ngModelを使用してバインドされた要素を設定する必要が

<form #myForm="ngForm" novalidate> 
<div> 
<input class="form-control" type="text" [(ngModel)]="contact.Ethnicity" ngControl="Ethnicity" #Ethnicity="ngForm" required/> 
</div> 

<div *ngIf="contact.Ethnicity !=null"> 
<input resetHidden class="form-control" type="text" [(ngModel)]="contact.FirstName" ngControl="FirstName" #FirstName="ngForm" required/> 
</div> 
</form> 


import {Directive, ElementRef, Input } from 'angular2/core'; 
import {NgModel} from 'angular2/common'; 
@Directive({ 
    selector: '[resetHidden]', 
    providers: [NgModel], 
    host: { 
    '(ngModelChange)' : 'onInputChange($event)' 
    } 
}) 
export class ResetHiddenDirective implements OnDestroy { 
    constructor(public model:NgModel) {} 
    ngOnDestroy() { 
    this.model.valueAccessor.writeValue(''); 
    this.model.viewToModelUpdate(''); 
    } 
    onInputChange(event){ 
    console.log('this.model.value before: '+this.model.value); 
    this.model.valueAccessor.writeValue(event.toUpperCase()); 
    console.log('this.model.value after: '+this.model.value); 
    } 
} 

Answer 1

：

constructor() { 
    this.ctrl = new Control(''); 
} 

hideInput() { 
    this.inputHidden = true; 
    this.ctrl.updateValue(''); 
    this.someValue = ''; 
} 

、テンプレートで：

<div *ngIf="inputHidden"> 
    <input [ngFormControl]="ctrl" [(ngModel)]="someValue"/> 
</div> 
<div (click)="hideInput()">Hide</div>