Winkel-Material 2 - Umgang mit mehreren Validierungs-Fehlermeldungen

Ich bin erstellen Sie ein Formular mit Winkel-Material 2. Ich bin mit Vorlagen form und ich haben die E-Mail-Eingang, die zwei Prüfer (erforderlich und E-Mail). In der doc für die input-Komponente (https://material.angular.io/components/component/input) er sagt nur:

"Wenn ein input-element kann mehr als einen Fehler-Zustand, es ist bis zum Verbraucher, um umzuschalten, welche Nachrichten angezeigt werden sollen. Das kann man mit CSS, ngIf oder ngSwitch."

gibt es kein Beispiel, und ich kann nicht finden es überall.

Dies ist mein 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>

    ...

Derzeit beide Nachrichten angezeigt werden die ganze Zeit. Auch wenn ich geben Sie eine ungültige E-Mail.

Einer der genannten Lösungen (CSS, ngIf oder ngSwitch) wäre fein, aber ich würd lieber CSS.

InformationsquelleAutor jbojcic | 2017-04-30
  1. 5

    Siehe Beispiel unten. Ein guter Weg, um zu arbeiten-Beispiele ist zur überprüfung/Suche den Winkel-2 Material GIT repo. Das Beispiel unten stammt aus 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>
    • Control kann nicht verwendet werden mit template-driven forms aber wenn ich das ändern [Control]="emailFormControl" zu #emailFormControl="ngModel" es scheint zu funktionieren. Ich brauche noch ein problem zu lösen, zeigt nur eine Meldung an die Zeit
    • Zeigen, ein zu einer Zeit kann jetzt gelöst werden mit css: md-Fehler:not(:first-of-type) { display: none; }
    InformationsquelleAutor Dan
  2. 3

    Dies ist, wie ich es umgesetzt in Winkel 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>

    Komponente.ts

    export class MyComponent implements OnInit {

  constructor(public service :EmployeeService) { }

  ngOnInit() {
  }

  onClear() {
    this.service.form.reset();

  }
}

    Service

    export class EmployeeService {

  constructor() { }

  form :FormGroup = new FormGroup({
    $key :new FormControl(null),
    mobile:new FormControl('',[Validators.required,Validators.minLength(10)]),  
  });
}
    InformationsquelleAutor Niraj Sonawane
Schreibe einen Kommentar