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

127

¿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í)

forms angular

— Bonneville
fuente

1

solo cuando utiliza la validación inmediata, por ejemplo, al escribir. No haga esto ... solo con buen pensamiento o con validación asincrónica, que se basa en un backend, por ejemplo.

— Sam Vloeberghs

243

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>

— Universidad angular
fuente

¿Cómo obtener el valor de la radio y la casilla de verificación usando formBuilder?

— Pardeep Jain

enlace referido tiene sintaxis antigua para angular2, por ejemplo ng-form-modal. pídale que actualice thanx.

— Pardeep Jain

Verifique este ejemplo, la sintaxis está actualizada -> blog.jhades.org/…

— Angular University

1

¿Cómo puede validar un formulario si desactiva el botón Enviar (a menos que lo haga en el flujo pero no siempre me gusta)? Tenga en cuenta las preocupaciones de UX aquí ..

— Sam Vloeberghs

66

[disabled] = "ngForm.invalid" también puede consultar

— shaunak1111

47

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

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

— Bougarfaoui El houcine
fuente

7

.html

<form [formGroup]="contactForm">

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

.ts

contactForm: FormGroup;

— alvic
fuente

Si bien este código puede responder la pregunta, proporcionar un contexto adicional sobre cómo y / o por qué resuelve el problema mejoraría el valor a largo plazo de la respuesta.

— Nic3500

5

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.

— John Deighan
fuente

4

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

— Prashobh
fuente

2

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>

— Emir Memic
fuente

0

Puede estar debajo del código puede ayudar:

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

— Shivang Gupta
fuente

0

Esto funcionó para mí.

.ts

newForm : FormGroup;

.html

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

— bereket gebredingle
fuente