Hình thức xác thực nhóm dạng khuôn mẫu có định dạng góc 2

Question

Tôi có câu hỏi liên quan đến mẫu định hướng mẫu góc 2. Tôi đã thiết lập một trong những hình thức này và tôi muốn có thể cung cấp cho người dùng một màn hình cảnh báo nếu một đầu vào trong một nhóm biểu mẫu không hợp lệ.

Ví dụ, giả sử tôi có các hình thức sau đây:

<form class="form" #f="ngForm" (submit)="submit()"> 
    <div class="form-group"> 
     <input type="text" name="firstName" required [(ngModel)]="user.firstName"> 
     <input type="text" name="lastName" required [(ngModel)]="user.lastName"> 
    </div> 
    <div class="form-group"> 
     <input type="text name="address" required [(ngModel)]="user.address"> 
    </div> 
    <button type="submit" [disabled]="!f.valid">Submit</button> 
</form> 

Tôi muốn toàn bộ hình thức nhóm có chứa đầu vào "firstName" và nhập "lastName" để thay đổi nếu một trong hai firstName và/hoặc lastName không hợp lệ. Tôi biết tôi có thể làm điều gì đó như vậy:

<div class="form-group" [class.has-error]="!firstName.valid || !lastName.valid"> 
    <input type="text" name="firstName" required [(ngModel)]="user.firstName" #firstName="ngModel"> 
    <input type="text" name="lastName" required [(ngModel)]="user.lastName" #lastName="ngModel"> 
</div> 

Nó sẽ hoạt động tốt. Nhưng đây là phần phức tạp: trong ví dụ này, tôi chỉ có hai yếu tố đầu vào với quy tắc xác thực đơn giản, do đó dễ kiểm tra và vẫn có thể đọc được. Nhưng nếu tôi có 10 đầu vào để kiểm tra trong một nhóm biểu mẫu thì sao? Tôi không muốn phải tự kiểm tra tính hợp lệ của mọi đầu vào.

Một trong những giải pháp tôi tìm thấy là để tạo ra một subform bên trong một đầu tiên:

<form class="form" #f="ngForm" (submit)="submit()"> 
    <form #subForm="ngForm" [class.has-error]="!subForm.valid"> 
     <input type="text" name="firstName" required [(ngModel)]="user.firstName"> 
     <input type="text" name="lastName" required [(ngModel)]="user.lastName"> 
    </form> 
    <div class="form-group"> 
     <input type="text name="address" required [(ngModel)]="user.address"> 
    </div> 
    <button type="submit" [disabled]="!f.valid || subForm.valid">Submit</button> 
</form> 

Đây là một plunker Tôi tạo ra để minh họa: form validation example

Nhưng tôi thấy nó khá xấu xí và tôi buộc phải kiểm tra hai biểu mẫu để biết liệu có bất kỳ vấn đề nào không. Vì vậy, cuối cùng câu hỏi của tôi là: tôi có thể thiết lập một div như là một góc 2 ngForm để có thể xác nhận nhiều đầu vào cùng một lúc? Về cơ bản là có một cách tốt hơn để thực hiện loại xác nhận này hơn là tạo một biểu mẫu con? Một cái gì đó như thế ví dụ:

<div class="form-group" #names [class.has-error]="!names.valid"> 
    <input type="text" name="firstName" required [(ngModel)]="user.firstName" #firstName="ngModel"> 
    <input type="text" name="lastName" required [(ngModel)]="user.lastName" #lastName="ngModel"> 
</div> 

PS: Tôi biết cách sử dụng một chức năng là một giải pháp khác nhưng nó có nhược điểm giống nhau: bạn phải kiểm tra bằng tay mỗi đầu vào, tùy thuộc vào quy tắc xác nhận nó có thể trở nên khá phức tạp, cộng với việc bạn đang mất đi một trong những lợi thế của việc sử dụng biểu mẫu định hướng thay vì các mẫu phản ứng.

Answer 1

Vâng, bạn có thể sử dụng chỉ thị ngModelGroup cho việc này.

<form class="form" #f="ngForm" novalidate> 

    <div class="form-group" #fgName="ngModelGroup" ngModelGroup="name" [class.has-error]="!fgName.valid"> 
    <input type="text" class="form-control" name="firstName" 
      [(ngModel)]="user.firstName" 
      placeholder="first name" 
      required> 

    <input type="text" class="form-control" name="lastName" 
      [(ngModel)]="user.lastName" 
      placeholder="last name" 
      required> 
    </div> 

    <div class="form-group"> 
    <input type="text" class="form-control" name="address" 
      [(ngModel)]="user.address" 
      placeholder="address" 
      required> 
    </div> 

    <button class="btn btn-primary" [disabled]="!f.valid">Submit</button> 

</form>