Angular2 Reactive Forms - Vô hiệu hóa điều khiển biểu mẫu động từ tình trạng

Question

tôi có một lựa chọn kiểm soát mà tôi muốn vô hiệu hóa tự động dựa trên một điều kiện:

this.activityForm = this.formBuilder.group({ 
    docType: [{ value: '2', disabled: this.activeCategory != 'document' }, Validators.required] 
}); 

Tuy nhiên, DOCTYPE không trở nên kích hoạt mặc dù tại một số thời điểm này .activeCategory trở thành 'tài liệu'.

Làm cách nào để khắc phục sự cố này?

Answer 1

Vì tôi không biết làm thế nào bạn đang thao tác activeCategory (có lẽ nó cũng là một FormControl?), Tôi sẽ đề nghị các phương pháp sau đây:

Bạn có thể sử dụng (change) để phát hiện khi this.activeCategory đã thay đổi, như sau :

1 - Nếu bạn đang sử dụng ngModel:

<input type="text" [(ngModel)]="activeCategory" (change)="checkValue($event)"> 

2 - Nếu đó là một FormControl:

<input type="text" formControlName="activeCategory" (change)="checkValue($event)"> 

Vì vậy, trong thành phần, bạn có thể thao tác các docTypekiểm soát sử dụng disable/enable phương pháp:

checkValue(event: Event) { 
    const ctrl = this.activityForm.get('docType'); 

    if (event.value === 'document') { 
    ctrl.enable(); 
    } else { 
    ctrl.disable(); 
    } 
} 

Answer 2

Bạn phải xử lý các phần tử được chọn khác với các phần tử HTML khác. Bạn sẽ phải thực hiện thiết lập lại khi thay đổi this.activeCategory.

Something như thế này:

this.activityForm.controls['docType'].reset({ value: '2', disabled: false });

Tất nhiên, có thể bạn sẽ muốn sử dụng giá trị hiện tại, chứ không phải là cứng mã hoá '2'.

Cùng một loại điều để vô hiệu hóa nó, nếu cần phát sinh (và nó có thể sẽ).

this.activityForm.controls['docType'].reset({ value: '2', disabled: true });

Thông tin thêm về hình thức kiểm soát ng reset.