簡單的Angular2反應形式控制啓用狀態變化

我有一個形式first_name和last_name字段。簡單的Angular2反應形式控制啓用狀態變化

當這兩個字段都輸入了一個值時，我希望啓用另一個formControl的形式相同。

我知道我可以訂閱像這樣的變化：

createForm() { 
    this.myForm = new FormGroup({ 
     first_name: this.first_name, 
     last_name: this.last_name, 
     email: this.email, 
     mobile: this.mobile, 
     salutation: this.salutation 
    }); 
    this.myForm.valueChanges.subscribe(data => console.log('form changes', (!data.first_name == !data.last_name))); 
    }

其記錄到控制檯，並顯示「真」在雙方的值設置。

您可以從角度github上的this thread看到我們不能/不應該將其設置爲屬性並綁定[disabled]=<booleanProperty>（並且核心團隊似乎仍在處理此問題）。

那麼我如何使用上面的valueChanges流的結果來真正將其他控件設置爲啓用狀態？

在OnInit它被禁用按導遊：

this.salutation = new FormControl({value:'', disabled: true}, Validators.required);

UPDATE

對不起，我忘了提，我已經嘗試過這一點，在OnInit：

this.myForm.valueChanges.subscribe(data => { 
    if (!data.first_name == !data.last_name) { 
    this.salutation.enable(); 
    }; 
})

這不起作用，它拋出控制檯錯誤：Maximum call stack size exceeded

來源

2016-12-19 rmcsharry

堆棧大小超過了線索來解決這一點。由於流是「連續的」，我的代碼一直在將控件設置爲啓用 - 但當然，它只需啓用一次。

因此增加一個檢查解決了這個問題，而現在它的工作原理：

this.myForm.valueChanges.subscribe(data => { 
    if (!data.first_name == !data.last_name && this.myForm.controls['salutation'].disabled) { 
    this.myForm.controls['salutation'].enable(); 
    }; 
})

更多信息here

來源

2016-12-19 18:41:45 rmcsharry

在訂閱功能，這樣做

this.myForm.controls["controlToEnable"].enable();

來源

2016-12-19 18:03:54 Josh

謝謝，我試過了。它不起作用，並且還會拋出超出最大堆棧大小的錯誤。我將添加到問題來說明，也許我的代碼是錯誤的。 – rmcsharry

簡單的Angular2反應形式控制啓用狀態變化

回答

相關問題