¿Cómo deshabilitar el botón 'enviar'?

¿Cómo deshabilitar el botón "Enviar" hasta que el formulario sea válido?

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

Como se ve en este ejemplo angular , hay una manera de deshabilitar un botón hasta que todo el formulario sea válido:

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

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

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.

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

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>

Puede estar debajo del código puede ayudar:

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

Esto funcionó para mí.

.ts

newForm : FormGroup;

.html

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