Đặt giá trị theo cách thủ công cho điều khiển FormBuilder

Question

Điều này khiến tôi phát điên, tôi ở dưới súng và không thể đủ khả năng chi tiêu cả ngày nữa.

Tôi đang cố đặt thủ công giá trị điều khiển ('dept') trong thành phần và giá trị của nó không hoạt động - ngay cả giá trị mới ghi vào bảng điều khiển đúng cách.

Đây là FormBuilder Instance:

initForm() { 
    this.form = this.fb.group({ 
    'name': ['', Validators.required], 
    'dept': ['', Validators.required], 
    'description': ['', Validators.required], 
    }); 
} 

Đây là xử lý sự kiện tiếp nhận các dept chọn:

deptSelected(selected: { id: string; text: string }) { 
    console.log(selected) // Shows proper selection! 

    // This is how I am trying to set the value 
    this.form.controls['dept'].value = selected.id; 
} 

Bây giờ khi biểu mẫu được gửi và đăng xuất this.form lĩnh vực này vẫn là chỗ trống! Tôi đã nhìn thấy sử dụng ppl khác updateValue() nhưng đây là phiên bản beta.1 và tôi không thấy đó là phương thức hợp lệ để gọi trên điều khiển.

Tôi cũng đã cố gắng gọi updateValueAndValidity() không thành công :(.

tôi sẽ chỉ cần sử dụng ngControl="dept" trên các yếu tố hình thức, giống như tôi đang làm với phần còn lại của hình thức nhưng nó một chỉ thị tùy chỉnh/phần.

<ng-select 
    [data]="dept" 
    [multiple]="false" 
    [items]="depts" 
    (selected)="deptSelected($event)" <!-- This is how the value gets to me --> 
    [placeholder]="'No Dept Selected'"></ng-select> 

Answer 1

Cập nhật: 19/03/2017

this.form.controls['dept'].setValue(selected.id); 

OLD:

Còn bây giờ chúng ta đang buộc phải làm một kiểu dàn diễn viên:

(<Control>this.form.controls['dept']).updateValue(selected.id) 

Không phải rất thanh lịch tôi đồng ý. Hy vọng điều này sẽ được cải thiện trong các phiên bản sau.

Answer 2

bạn có thể thử này:

deptSelected(selected: { id: string; text: string }) { 
    console.log(selected) // Shows proper selection! 

    // This is how I am trying to set the value 
    this.form.controls['dept'].updateValue(selected.id); 
} 

Để biết thêm chi tiết, bạn có thể có một cái nhìn tại JS Doc tương ứng liên quan đến việc s thông số econd của phương pháp updateValue: https://github.com/angular/angular/blob/master/modules/angular2/src/common/forms/model.ts#L269.

Hy vọng nó heps bạn, Thierry

Answer 3

Trong Final 2 Final (RC5 +) có API mới để cập nhật giá trị biểu mẫu. Phương pháp patchValue() API hỗ trợ cập nhật hình thức một phần, nơi mà chúng ta chỉ cần xác định một số lĩnh vực:

this.form.patchValue({id: selected.id}) 

Ngoài ra còn có phương pháp setValue() API mà cần một đối tượng với tất cả các trường mẫu. Nếu có trường bị thiếu, chúng tôi sẽ gặp lỗi.

Answer 4

Chung kết Aangular 2 đã cập nhật API. Họ đã thêm nhiều phương pháp cho việc này.

Để cập nhật điều khiển biểu mẫu từ bộ điều khiển thực hiện điều này:

this.form.controls['dept'].setValue(selected.id); 

this.form.controls['dept'].patchValue(selected.id); 

Không cần phải thiết lập lại các lỗi

Tài liệu tham khảo

https://angular.io/docs/ts/latest/api/forms/index/FormControl-class.html

https://toddmotto.com/angular-2-form-controls-patch-value-set-value

Answer 5

let cloneObj = Object.assign({}, this.form.getRawValue(), someClass); 
    this.form.complexForm.patchValue(cloneObj); 

Nếu bạn không muốn đặt từng trường theo cách thủ công.

Answer 6

@ Giải pháp cập nhật Angular 2 của Filoche 2. Sử dụng FormControl

(<Control>this.form.controls['dept']).updateValue(selected.id)

import { FormControl } from '@angular/forms'; 

(<FormControl>this.form.controls['dept']).setValue(selected.id)); 

Hoặc bạn có thể sử dụng @ AngularUniversity của solution trong đó sử dụng patchValue