'Gönder' düğmesi nasıl devre dışı bırakılır?

Form geçerli olana kadar "Gönder" butonu nasıl devre dışı bırakılır?

Angular2, Gönder düğmesinde kullanılabilen ng-devre dışı bırakılmışa bir eşdeğeri var mı? (ng-engelli benim için çalışmıyor.)

Bu Açısal örnekte görüldüğü gibi , tüm form geçerli olana kadar bir düğmeyi devre dışı bırakmanın bir yolu vardır:

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

içinde Açısal 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;

İşte çalışan bir örnek (denetleyicide bir submit () yöntemi olduğuna güvenmeniz gerekecek - giriş alanına 'abc' girilirse {user: 'abc'} gibi bir Nesne yazdırır):

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

Gördüğün gibi:

• loginForm.form kullanmayın, sadece loginForm kullanın
• loginForm.invalid ile birlikte çalışır! loginForm.valid
• submit () 'nun doğru değerlerin geçmesini istiyorsanız, giriş öğesinin adı ve ngModel öznitelikleri olmalıdır

Ayrıca, tavsiye ettiğim yeni FormBuilder'ı KULLANMADIĞINIZ zamandır. FormBuilder'ı kullanırken işler çok farklı.

Angular 2'de form doğrulama çok basittir

İşte bir örnek,

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

Demo için bu plunker'ı kontrol edin

Daha fazla bilgi

Çalışması için zorunlu giriş etiketlerinizin her birinin içine " gerekli " anahtar sözcüğü eklemeniz önemlidir .

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

Aşağıdaki kod yardımcı olabilir:

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

Bu benim için çalıştı.

ts

newForm : FormGroup;

.html

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