Angular2 Forms - Botón Enviar desactivado?
¿Debe desactivarse el botón Enviar hasta que un Formulario sea Válido? ¿Mejores prácticas?
¿angular2 tiene un equivalente a ng-disabled que se puede usar en el botón Enviar? (ng-discapacitado no funciona para mí.)
8 answers
Vea aquí un ejemplo , 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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-01-20 17:22:51
En Angular 2.x.x , 4, 5 ...
<form #loginForm="ngForm">
<input type="text" required>
<button type="submit" [disabled]="loginForm.form.invalid">Submit</button>
</form>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-11-22 17:56:15
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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-10-11 05:53:00
Aquí hay un ejemplo de trabajo (tendrás que confiar en mí que hay un método submit () en el controlador - imprime un objeto, como {user: 'abc'} si ' abc ' se introduce 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 utilice LoginForm.formulario, solo use LoginForm
- LoginForm.inválido funciona así como!LoginForm.valido
- si quieres que submit() sea pasado el(los) valor (s) correcto (s), el elemento input debe tener los atributos name y ngModel
También, esto es cuando NO estás usando el nuevo FormBuilder, que te recomiendo. Las cosas son muy diferentes cuando se usa FormBuilder.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-07-07 02:16:33
.html
<form [formGroup]="contactForm">
<button [disabled]="contactForm.invalid" (click)="onSubmit()">SEND</button>
.ts
contactForm: FormGroup;
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-08-13 01:12:20
Puede estar por debajo del código puede ayudar:
<button type="submit" [attr.disabled]="!ngForm.valid ? true : null">Submit</button>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-03-01 07:56:07
Esto funcionó para mí.
.ts
newForm : FormGroup;
.html
<input type="button" [disabled]="newForm.invalid" />
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-04-24 14:54:29
Es importante que incluya la palabra clave " required" 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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-05-08 23:59:15