Các điều khiển bị vô hiệu hóa Angular 2 không được đưa vào biểu mẫu. Giá trị

113

Tôi nhận thấy rằng nếu tôi vô hiệu hóa điều khiển trên biểu mẫu phản ứng Angular 2 thì điều khiển đó sẽ không được đưa vào form.value. Ví dụ: nếu tôi xác định biểu mẫu của mình như dưới đây:

this.notelinkingForm = new FormGroup({
    Enabled: new FormControl(settings.Enabled, Validators.required),
    LinkToPreceeding: new FormControl({value: settings.LinkToPreceeding, disabled: !settings.Enabled}, Validators.required),
    LinkingTolerance: new FormControl({value: settings.LinkingTolerance, disabled: !settings.Enabled}, Validators.required)
});

và kiểm tra giá trị this.notelinkingForm.value, nếu tất cả các điều khiển được bật thì kết quả đầu ra sẽ là:

{"Enabled":true, "LinkToPreceeding": true, LinkingTolerance:"100"}

Tuy nhiên, khi một số điều khiển bị tắt, nó sẽ là:

{"Enabled":true}

Lưu ý cách loại trừ các điều khiển bị vô hiệu hóa.

Ý định của tôi là khi biểu mẫu thay đổi, tôi muốn có thể chuyển form.value với tất cả các thuộc tính trong nó sang API còn lại của tôi. Điều này rõ ràng sẽ không thể thực hiện được nếu nó không chứa các mục bị vô hiệu hóa.

Tôi đang thiếu một cái gì đó ở đây hay đây là hành vi được mong đợi? Có cách nào để yêu cầu Angular đưa các mục bị vô hiệu hóa vào form.value không?

Hoan nghênh những suy nghĩ của bạn.

angular angular2-forms

— Jim Culverwell
nguồn

246

Bạn có thể dùng:

this.notelinkingForm.getRawValue()

Từ tài liệu :

Nếu bạn muốn bao gồm tất cả các giá trị bất kể trạng thái bị vô hiệu hóa, hãy sử dụng phương pháp này. Nếu không, thuộc valuetính là cách tốt nhất để lấy giá trị của nhóm.

— Sasxa
nguồn

41

Tự hỏi tại sao trên trái đất nhóm Angular lại làm điều này

— inorganik

@inorganik Họ đã làm điều đó vì có thể bật điều khiển bị vô hiệu hóa và chỉnh sửa giá trị của nó. Trong trường hợp này getRawValue () sẽ trả về một đối tượng có giá trị bị giả mạo.

— Tiếng Đan Mạch

1

Đây thực sự là một điều tốt. Ví dụ: tôi biết rằng giá trị của các điều khiển bị vô hiệu hóa của tôi sẽ không thay đổi vì vậy tôi không muốn đưa chúng vào API lưu vì ngay từ đầu tôi đã gán các điều khiển đó một giá trị từ cơ sở dữ liệu. Nhưng trong một số trường hợp, tôi thực sự muốn bao gồm những điều khiển có các giá trị được gán từ giao diện người dùng và chúng không được lưu trữ trong DB và chức năng này bao gồm nó. Luôn luôn tốt khi có cả hai lựa chọn.

— ChiragMS

Đó là sự thật @ChiragMS. Tôi thích khía cạnh đó miễn là tôi có sự lựa chọn giữa readonlyvà disabled. Nhưng đây không phải là trường hợp ví dụ như hộp kiểm và nút radio như tôi đã mô tả trong câu trả lời bên dưới. Trong những trường hợp đó, tôi không thích việc tôi phải lấy dữ liệu theo cách khác và mã một cái gì đó cụ thể cho trường hợp đó.

— Sandro

10

Một tùy chọn khác mà tôi sử dụng là:

this.form.controls['LinkToPreceeding'].value;

— Luis Ricardo Cayetano Herrera
nguồn

7

Cảm ơn @Sasxa đã mang đến cho tôi 80% những gì tôi cần.

Đối với những người đang tìm kiếm giải pháp cho cùng một vấn đề nhưng đối với các biểu mẫu lồng nhau, tôi có thể giải quyết bằng cách thay đổi

this.notelinkingForm.get('nestedForm').value

đến

this.notelinkingForm.getRawValue().nestedForm

— eper
nguồn

0

Nếu bạn sử dụng readonlythay vì disablednó vẫn không thể chỉnh sửa được trong khi dữ liệu sẽ được đưa vào biểu mẫu. Nhưng điều đó không thể xảy ra trong mọi trường hợp. Ví dụ: nó không khả dụng cho các nút radio và hộp kiểm. Xem tài liệu web MDN . Trong những trường hợp đó, bạn phải đăng ký các giải pháp khác được cung cấp tại đây.

— Sandro
nguồn