2017-12-30 51 views
0

Ich lerne Angular 5 mit TypeScript. Ich bin völlig neu dazu. Ich versuche jetzt, eine Form zu konstruieren und zu validieren. Aber es funktioniert nicht richtig. Bitte beachten Sie meinen Code unten.Angular 5 Form Validierung (erforderlich) funktioniert nicht

Dies ist meine Komponente.

@Component({ 
    selector: 'app-login', 
    templateUrl: './login.component.html', 
    styleUrls: ['./login.component.scss'], 
    animations: [routerTransition()] 
}) 
export class LoginComponent implements OnInit { 

    loginForm: FormGroup; 

    errors = []; 

    constructor(private fb: FormBuilder, public router: Router, private globals: GlobalsService, private http: Http) { 

    } 

    ngOnInit() { 
     this.loginForm = new FormGroup({ 
      email: new FormControl("", Validators.required), 
      password: new FormControl("") 
     }); 
    } 

    onLoggedin(formData) { 

     alert("Submit form"); 


    } 

} 

Wie Sie sehen können, setze ich "erforderlich" Validierungsattribut auf das E-Mail-Feld. Das ist mein HTML.

<div class="login-page" [@routerTransition]> 
    <div class="row justify-content-md-center"> 
     <div class="col-md-4"> 
      <img src="assets/images/logo.png" width="150px" class="user-avatar" /> 
      <h1>Yo Cash Flow</h1> 
      <div class="alert alert-danger" *ngFor="let error of errors"> 
       <strong>{{ error.msg }}</strong> 
      </div> 
      <form [formGroup]="loginForm" role="form" (ngSubmit)="onLoggedin(loginForm.value)"> 
       <div class="form-content"> 
        <div class="form-group"> 
         <input type="text" name="email" formControlName="email" class="form-control input-underline input-lg" placeholder="Email"> 
         <div *ngIf="loginForm.controls['email'].errors.required" class="text-danger">Email is required</div> 
        </div> 


       </div> 
       <button type="submit" class="btn rounded-btn"> Log in </button> 
       &nbsp; 
       <a class="btn rounded-btn" [routerLink]="['/signup']">Sign up</a> 
      </form> 
     </div> 
    </div> 
</div> 

Wie Sie sehen können, versuche ich den Fehler einzeln anzuzeigen. Ich meine für "erforderliches" Attribut, ich rufe die Fehlermeldung wie diese errors.required ab. Aber es funktioniert nicht. Aber als ich versuchte, "gültig" wie unten zu verwenden, funktioniert es.

Aber ich möchte den Fehler einzeln abrufen, weil ich die andere Nachricht für den anderen Fehler anzeigen möchte. Bitte wie kann ich das beheben? Warum funktioniert es nicht, wenn ich "loginForm.controls [" email "]. Errors.required" verwende? Was ist die korrekte Art, die unterschiedliche Nachricht für die verschiedenen Validierungsregeln zu zeigen?

+0

Wissen Sie? Warum hat dein Originalcode nicht funktioniert? Es sieht für mich so aus, als ob du die korrekte Syntax benutzt hättest. Mußten Sie nur den elvis-Operator hinzufügen: '* ngIf =" loginForm.controls ['email']. Errors? .required "'? – ConnorsFan

Antwort

1

können Sie verwenden, um die errors Eigenschaft, etwa so:

loginForm.controls['email'].errors 

Wenn es keine Fehler gibt, wird es null zurück, sonst wird es ein Objekt wie so zurück:

{ required : true } 

Sie dann Sie müssen lediglich eine Funktion erstellen, die eine vom Benutzer lesbare Fehlermeldung zurückgibt:

getErrorMessage(controlName, displayName) { 
    let result = ""; 
    let errors = loginForm.controls[controlName].errors; 
    if (errors.required) { 
     result += (displayName + " is required."); 
    } 
    if (errors.whatever) { 
     result += "Whatever you like"; 
    } 
    return result; 
} 
+0

Ja. Kann ich jedoch die unterschiedliche Fehlermeldung für die andere Regel anzeigen? Ich meine, für "erforderlich" würde ich gerne "E-Mail ist erforderlich" zeigen. Dann habe ich vielleicht eine andere Regel, um das Format zu überprüfen und "ungültiges E-Mail-Format" anzuzeigen. Ich denke, ich kann es nicht tun, indem ich nur loginForm.controls ['email']. –

+0

Sie müssen nur eine Funktion erstellen, um Ihre lesbaren Fehlermeldungen zu erstellen. Ich habe meine Antwort aktualisiert, um ein grundlegendes Beispiel zu geben, was ich meine – user184994

+0

Vielen Dank. Das funktioniert perfekt. –

Verwandte Themen