Estoy creando un formulario con Angular Material 2. Estoy usando un formulario controlado por plantilla y tengo una entrada de correo electrónico que tiene dos validadores (requerido y correo electrónico). En el documento para el componente de entrada ( https://material.angular.io/components/component/input ) solo dice:
"Si un elemento de entrada puede tener más de un estado de error, depende del consumidor alternar qué mensajes se deben mostrar. Esto se puede hacer con CSS, ngIf o ngSwitch".
no hay ejemplo y no lo encuentro por ningún lado.
Este es mi html:
... <form (ngSubmit)="onSubmit(registrationForm)" #registrationForm="ngForm"> ... <md-input-container floatPlaceholder="never"> <input mdInput type="email" placeholder="Enter your email address" name="email" [(ngModel)]="email" required email> <md-error class="required">Email is required.</md-error> <md-error class="email">Invalid email.</md-error> </md-input-container> ...Actualmente ambos mensajes se muestran todo el tiempo. Incluso si ingreso algún correo electrónico no válido.
Cualquiera de las soluciones mencionadas (CSS, ngIf o ngSwitch) estaría bien, pero prefiero CSS.
Vea el ejemplo a continuación. Una excelente manera de obtener ejemplos de trabajo es revisar/buscar en el repositorio de Angular 2 Material GIT. El siguiente ejemplo proviene de https://github.com/angular/material2/blob/master/src/demo-app/input/input-demo.html
<md-input-container> <input mdInput placeholder="email" [formControl]="emailFormControl"> <md-error *ngIf="emailFormControl.hasError('required')"> This field is required </md-error> <md-error *ngIf="emailFormControl.hasError('pattern')"> Please enter a valid email address </md-error> </md-input-container>Así es como lo he implementado en Angular 6 ( ReactiveFormsModule )
HTML
<form [formGroup]="service.form" class="normal-form"> <mat-grid-list cols="2" rowHeight="300px"> <mat-grid-tile> <input type="hidden" formControlName="$key"> <div class="controles-container"> <mat-form-field> <input formControlName="mobile" matInput placeholder="Mobile*"> <mat-error *ngIf="service.form.controls['mobile'].errors?.required">This field is mandatory.</mat-error> <mat-error *ngIf="service.form.controls['mobile'].errors?.minlength">Minimum 8 charactors needed.</mat-error> </mat-form-field> </div> </mat-grid-tile> </mat-grid-list> </form>componente.ts
export class MyComponent implements OnInit { constructor(public service :EmployeeService) { } ngOnInit() { } onClear() { this.service.form.reset(); } }Servicio
export class EmployeeService { constructor() { } form :FormGroup = new FormGroup({ $key :new FormControl(null), mobile:new FormControl('',[Validators.required,Validators.minLength(10)]), }); }