reactivos - Angular2 Forms-¿Botón de envío deshabilitado?

validar formulario angular 5

Question

¿Debería deshabilitarse el botón Enviar hasta que un formulario sea válido? ¿Mejores prácticas?

¿Angular2 tiene un equivalente a ng-disabled que se puede utilizar en el botón Enviar? (ng-disabled no funciona para mí)

Answer 1

.html

<form [formGroup]="contactForm">

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

.ts

contactForm: FormGroup;

Answer 2

Aquí hay un ejemplo de trabajo (tendrá que confiar en mí que hay un método submit () en el controlador; imprime un Objeto, como {user: ''abc''} si se ingresa ''abc'' en el campo de entrada):

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

Como puedes ver:

• no use loginForm.form, solo use loginForm
• loginForm.invalid funciona tan bien como! loginForm.valid
• si desea que submit () reciba los valores correctos, el elemento de entrada debe tener los atributos name y ngModel

Además, esto es cuando NO está utilizando el nuevo FormBuilder, que recomiendo. Las cosas son muy diferentes cuando se usa FormBuilder.

Answer 3

Es importante que incluya la palabra clave " requerida " dentro de cada una de sus etiquetas de entrada obligatorias para que funcione.

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

Answer 4

Esto funcionó para mí.

.ts

newForm : FormGroup;

.html

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

Answer 5

La validación de formularios es muy sencilla en Angular 2

Aquí hay un ejemplo,

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

Mira este plunker para la demostración

Más información

Answer 6

Puede estar debajo del código puede ayudar:

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

Answer 7

en Angular 2.xx , 4 , 5 ...

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

Answer 8

vea aquí un example , en Angular 2 esta es una forma de deshabilitar un botón hasta que todo el formulario sea válido:

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