私はTypeScriptで角度5を学習しています。私は全く新しいです。私は今、フォームを構築し、それを検証しようとしています。しかし、正常に動作していません。以下の私のコードを見てください。角度5フォームの検証(必須)動作していません
これは私のコンポーネントです。
@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");
}
}
あなたは私が電子メールのフィールドに「必須」の検証属性を設定しています見ることができるように。 これは私の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>
ご覧のとおり、個別にエラーを表示しようとしています。私は "必須"属性を意味する、私はこのerrors.requiredのようなエラーメッセージを取得しています。しかし、それは動作していません。しかし、私は以下のような "有効"を使用しようとしたときに動作しています。
loginForm.controls['email'].invalid
しかし、別のエラーのために別のメッセージを表示したいので、個別にエラーを取得したいとします。どうすればいいですか?なぜ "loginForm.controls [" email "]。errors.required"を使用すると動作しないのですか?さまざまな検証ルールに対して異なるメッセージを表示する正しい方法は何ですか?
Do you knoなぜ元のコードがうまくいかなかったのですか?あなたが正しい構文を使用していたように見えます。あなたはelvis演算子を追加するだけでしたか? '* ngIf =" loginForm.controls ['email']。errors?.required "'? – ConnorsFan