wake-up-neo.net

Angular2 Forms - Schaltfläche "Senden" deaktiviert?

Sollte die Schaltfläche "Senden" deaktiviert sein, bis ein Formular gültig ist? Beste Übung?

Gibt es ein Äquivalent zu ng-disabled, das für die Schaltfläche "Senden" verwendet werden kann? (ng-disabled funktioniert nicht bei mir.)

formsangular
103
Bonneville

siehe hier ein Beispiel , in Angular 2 können Sie eine Schaltfläche deaktivieren, bis das gesamte Formular gültig ist:

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

in Angular 2.x.x , 4 , 5 ...

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

Hier ist ein funktionierendes Beispiel (Sie müssen mir vertrauen, dass es auf dem Controller eine submit () - Methode gibt - es gibt ein Objekt wie {user: 'abc'} aus, wenn 'abc' im 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, verwenden Sie einfach loginForm
  • loginForm.invalid funktioniert ebenso wie! loginForm.valid
  • wenn Sie möchten, dass submit () die korrekten Werte übergibt, sollte das Eingabeelement die Attribute name und ngModel haben

Dies ist auch der Fall, wenn Sie NICHT den neuen FormBuilder verwenden, den ich empfehle. Bei der Verwendung von FormBuilder sind die Dinge sehr unterschiedlich.

2
user1738579

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 für Demo

Mehr Info

2
Prashobh

Es ist wichtig, dass Sie das Schlüsselwort " required " in jedes Ihrer obligatorischen Eingabe-Tags aufnehmen, 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>
1
Emir Memic

.html

<form [formGroup]="contactForm">

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

.ts

contactForm: FormGroup;
1
alvic

Das hat bei mir funktioniert.

.ts

newForm : FormGroup;

.html

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

Kann unterhalb des Codes helfen:

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