Xác thực Mẫu Kích hoạt Góc 2 trên Gửi

Question

Tôi đã tạo biểu mẫu có góc 2 và thêm một số trình xác thực theo yêu cầu. Bây giờ tôi muốn kích hoạt xác nhận biểu mẫu nếu người dùng nhấp vào nút gửi. Trong các ví dụ tôi đã tìm thấy cho đến nay nút gửi bị vô hiệu hóa miễn là biểu mẫu không hợp lệ nhưng tôi muốn có nút gửi luôn kích hoạt và khi người dùng nhấp vào gửi biểu mẫu phải được xác thực. Có ai biết làm thế nào tôi có thể làm cho công việc này và phương pháp loại tôi nên sử dụng? Tôi đã tìm thấy phương thức updateValueAndValidity nhưng dường như nó không hoạt động với phương thức này.

Answer 1

Nếu bạn đang sử dụng Template Mẫu Driven bạn có thể sử dụng cú pháp sau:

<form #f="ngForm" (submit)="add(f.valid)" novalidate> 
    <button type="submit">Save</button> 
</form> 

.ts

add(isValid: boolean){ 
    if(isValid){ 
     //do something 
    } 
} 

bạn cũng có thể thêm một số lỗi trên trình như thế này:

<form #f="ngForm" (submit)="add(f.valid)" novalidate> 
    <label>Name</label> 
    <div> 
     <input [(ngModel)]="name" name="name" #name="ngModel" required> 
    </div> 
    <div[hidden]="name.valid || (name.pristine && !f.submitted)"> 
     <small class="text-danger">Please input name</small> 
    </div> 
    <button type="submit">Save</button> 
</form> 

Answer 2

Việc xác thực nên được thực hiện mỗi khi bạn thay đổi mô hình. Nhưng có lẽ bạn không thể nhìn thấy thông báo lỗi vì FormControl không bị ảnh hưởng? Đây là giải pháp của tôi hoạt động tốt.

tôi đã làm theo các bước sau đây dễ dàng:

1. Thực hiện một FormComponent (selector "hình thức") mà tiêm formGroupDirective (đăng ký vào trường hợp nộp và thiết lập trình là đúng)

 

    @Component({ 
     selector: 'form', 
     templateUrl: 'form.component.html', 
     styleUrls: ['form.component.scss'] 
    }) 
    export class FormComponent implements OnInit { 
     @Output() submit = new EventEmitter(); 

     constructor(@Optional() private formGroupDirective: FormGroupDirective) { 
     } 

     ngOnInit() { 
      if (this.formGroupDirective) { 
       this.formGroupDirective.ngSubmit.subscribe(() => { 
        this.formGroupDirective.form['submitted'] = true; 
       }); 
      } 
     } 

    } 

Các dòng quan trọng là trong ngOnInit

2. Kiểm tra hình thức được gửi để hiển thị lỗi

   * ngIf = "control? .hasError ('required') & & (control? .ouched || ? Hình .submitted)"

Hy vọng rằng sẽ giúp

Answer 3

(Mẫu Reactive)

Có vấn đề với nó giải pháp của tôi là:

- Template

<button type="button" (click)="f.ngSubmit.emit(f)">Submit From Outside 
form</button> 

<form novalidate #f="ngForm" (ngSubmit)="save($event)" 
[formGroup]="MyformGroup"> 
... 
</form> 

- Loại

@ViewChild('f') f: FormGroupDirective; 

submit(formDirective: FormGroupDirective) { 
    console.log('valid', formDirective.valid); 
    console.log('value', formDirective.value); 
} 

Đây là giải pháp mà tôi sử dụng để gửi biểu mẫu bằng một số nút không có trong biểu mẫu.

Cảm ơn