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>
<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?
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