xác nhận các biểu mẫu lồng nhau mà không ảnh hưởng đến biểu mẫu gốc

Question

Có sự cố xác thực trong các biểu mẫu lồng nhau trong angularjs 1.5 và có issue in github about it.

nhưng 2 người trong chủ đề đó cung cấp giải pháp và một trong số họ đã mở đường tới lõi angularjs là chỉ thị ngFormTopLevel và một người khác được cung cấp bởi người dùng có tên là isolate-form.

nhưng không ai trong số họ có thể xử lý tình huống này và không làm việc cho tôi ... ít nhất!

cho phép giả định cấu trúc này:

<ng-form name="X1" novalidate> 

    <ng-form name="X2" novalidate isolate-form> 

     <input name="Input01" ng-model="input1" required /> 
     <p ng-show="X2.Input01.$touched && X2.Input01.$invalid">input is not valid</p> 

     <input name="Input02" ng-model="input2" required /> 

     <input type="button" id="ButtonX2" value="Submit Nested Form" ng-disabled="X2.$invalid" /> 

    </ng-form> 

<input name="Input03" ng-model="input3" required ng-minlength="5" /> 

<input type="button" id="ButtonX1" value="Submit Nested Form" ng-disabled="X1.$invalid" /> 

</ng-form> 

tl; dr: ButtonX1 phụ thuộc vào hình thức xác nhận lồng nhau và nó không nên!

---

Kiểm tra trường hợp 1:

Bước 1: Điền Input3 với bất kỳ văn bản và hơn 5 ký tự.

Dự kiến: ButtonX1 phải được bật.

Kết quả: ButtonX1 vẫn bị tắt.

---

Kiểm tra trường hợp 2:

Bước 1: Điền Input1 với bất kỳ văn bản.

Bước 2: Điền input2 với bất kỳ văn bản nào.

Dự kiến: ButtonX2 phải được bật.

Kết quả: NútX2 được bật.

---

Kiểm tra trường hợp 3:

Bước 1: Điền Input3 với bất kỳ văn bản và hơn 5 ký tự.

Bước 2: Điền input1 với bất kỳ văn bản nào.

Bước 2: Điền input2 với bất kỳ văn bản nào.

Dự kiến: ButtonX1 và ButtonX2 phải được bật.

Kết quả: ButtonX1 và ButtonX2 được bật.

---

và sự cố khác là thẻ P bên trong biểu mẫu lồng nhau không hiển thị khi Input01 không hợp lệ. Tôi đã thử cả isolateForm và ngFormTopLevel nhưng cả hai đều có vấn đề này.

Answer 1

Tôi nghĩ đây là giải pháp theo yêu cầu của bạn.

<ng-form name="X1" novalidate> 

     <ng-form name="X2" novalidate isolate-form> 

      <input name="Input01" ng-model="input1" required /> 
      <p ng-show="X2.Input01.$invalid && X2.Input01.$touched">input is not valid</p> 

      <input name="Input02" ng-model="input2" required /> 

      <input type="button" id="ButtonX2" value="Submit Nested Form" ng-disabled="X2.$invalid" /> 

     </ng-form> 

     <input name="Input03" ng-model="input3" required ng-minlength="5" /> 

     <input type="button" id="ButtonX1" value="Submit Nested Form" ng-disabled="X1.Input03.$invalid" /> 

    </ng-form> 

Answer 2

Có vẻ như điều duy nhất cần thiết là gọi $ removeControl trên bộ điều khiển biểu mẫu gốc. Chỉ thị rất đơn giản này đã làm việc cho tôi. Áp dụng cho ng-form của bạn.

function isolateFormDirective() { 
    return { 
     restrict: 'A', 
     require: ['form', '^form'], 
     link: function(scope, element, attrs, forms) { 
      forms[1].$removeControl(forms[0]); 
     } 
    } 
} 

export default isolateFormDirective;