Làm cách nào để tắt nút 'gửi'?

Làm cách nào để tắt nút "Gửi" cho đến khi biểu mẫu hợp lệ?

Angular2 có tương đương với ng-tật có thể được sử dụng trên nút Gửi không? (ng-khuyết không làm việc cho tôi.)

Như đã thấy trong ví dụ Angular này , có một cách để vô hiệu hóa một nút cho đến khi toàn bộ biểu mẫu hợp lệ:

<button type="submit" [disabled]="!ngForm.valid">Submit</button>

trong góc 2.xx , 4 , 5 ...

<form #loginForm="ngForm">
    <input type="text" required> 
    <button  type="submit"  [disabled]="loginForm.form.invalid">Submit</button>
</form>

.html

<form [formGroup]="contactForm">

<button [disabled]="contactForm.invalid"  (click)="onSubmit()">SEND</button>

.ts

contactForm: FormGroup;

Dưới đây là một ví dụ hoạt động (bạn sẽ phải tin tưởng rằng có một phương thức submit () trên bộ điều khiển - nó in một Đối tượng, như {user: 'abc'} nếu 'abc' được nhập vào trường đầu vào):

<form #loginForm="ngForm" (ngSubmit)="submit(loginForm.value)">
    <input type="text" name="user" ngModel required>
    <button  type="submit"  [disabled]="loginForm.invalid">
        Submit
    </button>
</form>

Bạn có thể thấy:

• không sử dụng loginForm.form, chỉ sử dụng loginForm
• loginForm.invalid hoạt động tốt như! loginForm.valid
• nếu bạn muốn submit () được truyền (các) giá trị chính xác, phần tử đầu vào phải có thuộc tính name và ngModel

Ngoài ra, đây là khi bạn KHÔNG sử dụng FormBuilder mới mà tôi khuyên dùng. Mọi thứ rất khác nhau khi sử dụng FormBuilder.

Xác thực mẫu rất đơn giản trong Angular 2

Đây là một ví dụ,

<form (ngSubmit)="onSubmit()" #myForm="ngForm">

 <div class="form-group">
  <label for="firstname">First Name</label>
  <input type="text" class="form-control" id="firstname" 
   required [(ngModel)]="firstname" name="firstname">
 </div>

 <div class="form-group">
  <label for="middlename">Middle Name</label>
  <input type="text"  class="form-control" id="middlename" 
   [(ngModel)]="middlename" name="middlename">
 </div>

 <div class="form-group">
  <label for="lastname">Last Name</label>
  <input type="text"  class="form-control" id="lastname" 
   required minlength = '2' maxlength="6" [(ngModel)] = "lastname" name="lastname">
 </div>

 <div class="form-group">
  <label for="mobnumber">Mob Number</label>
  <input type="text"  class="form-control" id="mobnumber"  
   minlength = '2' maxlength="10" pattern="^[0-9()\-+\s]+$" 
   [(ngModel)] = "mobnumber" name="mobnumber">
 </div>

 <button type="submit" [disabled]="!myForm.form.valid">Submit</button>

</form>

Kiểm tra plunker này để xem demo

Thêm thông tin

Điều quan trọng là bạn phải bao gồm từ khóa " bắt buộc " bên trong mỗi thẻ đầu vào bắt buộc để nó hoạt động.

 <form (ngSubmit)="login(loginForm.value)" #loginForm="ngForm">
    ...
    <input ngModel required name="username" id="userName" type="text" class="form-control" placeholder="User Name..." />
    <button type="submit" [disabled]="loginForm.invalid" class="btn btn-primary">Login</button>

Có thể dưới đây mã có thể giúp:

<button type="submit" [attr.disabled]="!ngForm.valid ? true : null">Submit</button>

Điều này làm việc cho tôi.

.ts

newForm : FormGroup;

.html

<input type="button" [disabled]="newForm.invalid" />