Sử dụng tính năng vô hiệu hóa với biểu mẫu hướng mô hình

Question

Tôi đang cố gắng sử dụng disabled bên trong biểu mẫu hướng mô hình của mình. Tôi có dạng sau:

this.form = this.formBuilder.group({ 
    val1: ['', Validators.required], 
    val2: [{value:'', disabled:this.form.controls.val1.valid}] 
}); 

tôi nhận được một lỗi (không tìm thấy controls của this.form) có lẽ vì tôi đang sử dụng this.form bên this.form.

Tôi làm cách nào để khắc phục điều đó?

PS Tôi cũng đã cố gắng thêm [disabled]='...' bên trong html của tôi, nhưng tôi nhận được một cảnh báo nói rằng tôi nên sử dụng formBuilder thay

Answer 1

Yea bạn nói đúng rằng vấn đề là bởi vì bạn đang tham khảo một biến (this.form) khi nó chưa được khởi tạo. May mắn, trong trường hợp của bạn, bạn không thực sự cần phải tham khảo nhóm biểu mẫu trong điều khiển biểu mẫu val2 của bạn. Mã của bạn có thể được viết lại như sau:

let val1Control = this.formBuilder.control('', Validators.required); 
this.form = this.formBuilder.group({ 
    val1: val1Control , 
    val2: [{value:'', disabled: val1Control.valid}] 
}); 

Tuy nhiên, khối này chỉ khởi giá trị disabled kiểm soát VAL2 mà không giám sát tính hợp lệ val1Control 's. Để làm điều đó, bạn sẽ cần phải đăng ký val1Control.statusChanges:

let val1Control = this.formBuilder.control('', Validators.required); 
let val2Control = this.formBuilder.control({value:'', disabled: !val1Control.valid}); 
this.form = this.formBuilder.group({ 
    val1: val1Control, 
    val2: val2Control 
}) 

val1Control.statusChanges.subscribe((newStatus) => { 
    if (val1Control.valid) { 
    val2Control.enable(); 
    } else { 
    val2Control.disable(); 
    } 
}); 

Đây là plunker làm việc: http://plnkr.co/edit/kEoX2hN9UcY4yNS3B5NF