Bagaimana cara menonaktifkan tombol 'kirim'?

Bagaimana cara menonaktifkan tombol "Kirim" hingga formulirnya valid?

Apakah angular2 memiliki padanan dengan ng-disabled yang dapat digunakan pada tombol Kirim? (ng-disabled tidak berhasil untuk saya.)

Seperti yang terlihat pada contoh Angular ini , ada cara untuk menonaktifkan tombol hingga seluruh formulir valid:

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

di Angular 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;

Berikut adalah contoh yang berfungsi (Anda harus mempercayai saya bahwa ada metode submit () pada pengontrol - ini mencetak Objek, seperti {user: 'abc'} jika 'abc' dimasukkan di bidang input):

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

Seperti yang Anda lihat:

• jangan gunakan loginForm.form, cukup gunakan loginForm
• loginForm.invalid berfungsi sebaik! loginForm.valid
• jika Anda ingin submit () diberikan nilai yang benar, elemen input harus memiliki atribut name dan ngModel

Juga, ini adalah saat Anda TIDAK menggunakan FormBuilder baru, yang saya rekomendasikan. Semuanya sangat berbeda saat menggunakan FormBuilder.

Validasi formulir sangat mudah di Angular 2

Berikut ini contohnya,

<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>

Periksa plunker ini untuk demo

Info lebih lanjut

Anda harus menyertakan kata kunci " wajib " di dalam setiap tag masukan wajib Anda agar dapat berfungsi.

 <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>

Mungkin kode di bawah ini dapat membantu:

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

Ini berhasil untuk saya.

.ts

newForm : FormGroup;

.html

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