Actualmente estoy tratando de hacer un formulario de inicio de sesión simple usando Bootstrap 4 / Angular 4. La cosa es que baso mi plantilla HTML en la documentación disponible en https://angular.io/docs/ts/latest/guide/forms.html , No puedo hacer que los mensajes de error funcionen si la entrada está vacía. Esto es lo que tengo hasta ahora:
<label>User Name:</label> <input id="name" #name placeholder="user name" class="form-control mb-md-3" (keyup.enter)="login(name.value, password.value)" name="username" required> <div [hidden]="!name.valid || !name.pristine" class="alert alert-danger">User name is required</div>No estoy seguro de si necesito tener un enlace bidireccional a un modelo o algo así, no entiendo completamente la documentación. Si ayuda, tengo una clase para ello:
export class User { constructor( public id: number, public name: string, public password: string ) {} }Además, por ahora esto no va a un servicio ni nada, es solo una pequeña pantalla de demostración que admitirá el enrutamiento.
Debe usar la directiva ngModel. Esto puede vincularse a algún objeto, o simplemente pondrá a su disposición .invalid, .valid, etc. Además, debe hacer referencia a este ngModel, no al elemento de entrada.
Esto funciona:
<label>User Name:</label> <input id="name" #name="ngModel" placeholder="user name" class="form-control mb-md-3" (keyup.enter)="login(name.value, password.value)" name="username" required ngModel> <div *ngIf="name.invalid && name.dirty" class="alert alert-danger">User name is required</div>