Wie kann ich die Schaltfläche "Senden" deaktivieren?

Wie deaktiviere ich die Schaltfläche "Senden", bis das Formular gültig ist?

Hat angle2 ein Äquivalent zu ng-disabled, das auf der Schaltfläche Senden verwendet werden kann? (ng-disabled funktioniert bei mir nicht.)

Wie in diesem Angular- Beispiel zu sehen ist , gibt es eine Möglichkeit, eine Schaltfläche zu deaktivieren, bis das gesamte Formular gültig ist:

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

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

Hier ist ein funktionierendes Beispiel (Sie müssen mir vertrauen, dass es auf dem Controller eine submit () -Methode gibt - sie druckt ein Objekt wie {user: 'abc'}, wenn 'abc' in das Eingabefeld eingegeben wird):

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

Wie du siehst:

• Verwenden Sie nicht loginForm.form, sondern nur loginForm
• loginForm.invalid funktioniert genauso gut wie! loginForm.valid
• Wenn an submit () die richtigen Werte übergeben werden sollen, sollte das Eingabeelement die Attribute name und ngModel haben

Dies ist auch dann der Fall, wenn Sie NICHT den neuen FormBuilder verwenden, den ich empfehle. Bei der Verwendung von FormBuilder sieht das ganz anders aus.

Die Formularvalidierung ist in Angular 2 sehr einfach

Hier ist ein Beispiel,

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

Überprüfen Sie diesen Plunker auf Demo

Mehr Info

Es ist wichtig, dass Sie das Schlüsselwort " erforderlich " in jedes Ihrer obligatorischen Eingabe-Tags einfügen, damit es funktioniert.

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

Möglicherweise kann der folgende Code helfen:

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

Das hat bei mir funktioniert.

.ts

newForm : FormGroup;

.html

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