Angular2 Matériel: Validation personnalisée pour l'entrée de matériau angulaire

Question

Dans mon Angular 2 et l'application de matériel, je veux vérifier si le nom d'utilisateur a déjà pris ou non. Si c'est déjà pris, il devrait montrer l'erreur.

Je suis le guide ci-dessous.
https://material.angular.io/components/input/overview#error-messages

fichier Tapuscrit

import {Component} from '@angular/core'; 
import {FormControl, Validators} from '@angular/forms'; 

const existingUserNames = ['rohit', 'mohit', 'ronit']; 

@Component({ 
    selector: 'input-errors-example', 
    templateUrl: 'input-errors-example.html', 
    styleUrls: ['input-errors-example.css'], 
}) 
export class InputErrorsExample { 

    emailFormControl = new FormControl('', [ 
     Validators.required 
    ] 

    // I want to call below isUserNameTaken function but dont know 
    // how to use it with Validators so that error message will be visible. 

    isUserNameTaken() : boolean { 
     this.attributeClasses = attributeClasseses; 
     this.attributeClasses.find(object => { 
      if(object.attributeClass === this.attributeClass) { 
       console.log("found " + JSON.stringify(object)); 
       return true; 
      } 
     }); 
     return false; 
    } 
} 

HTML

<form class="example-form"> 
    <md-form-field class="example-full-width"> 
    <input mdInput placeholder="Email [formControl]="emailFormControl"> 
    <md-error *ngIf="emailFormControl.hasError('required')"> 
     Email is <strong>required</strong> 
    </md-error> 

    <!-- I want to make something like that - custom validation --> 

    <md-error *ngIf="emailFormControl.hasError('username-already-taken')"> 
     Username is already taken. Please try another. 
    </md-error> 
    <!-- custom validation end -->   

    </md-form-field> 

Answer 1

Il vous suffit de changer votre fonction pour recevoir un composant en tant que paramètre et retourner null si tout va bien et un objet d'erreur si ce n'est pas le cas. Ensuite, placez-le sur le tableau du validateur de composants.

// Control declaration 
emailFormControl = new FormControl('', [ 
    Validators.required, 
    isUserNameTaken 
] 

// Correct validator funcion 
isUserNameTaken(component: Component): ValidationErrors { 
    this.attributeClasses = attributeClasseses; 
    this.attributeClasses.find(object => { 
     if(object.attributeClass === this.attributeClass) { 
      console.log("found " + JSON.stringify(object)); 
      // found the username 
      return { 
       username-already-taken: { 
        username: component.value 
       } 
      }; 
     } 
    }); 
    // Everything is ok 
    return null; 
} 

Il est expliqué plus en détail dans le lien qui Will Howell (grâce, par la voie) mis sur les commentaires. Il explique également comment faire de même pour les formes non réactives.

Tutorial