ユーザーがログインボタン（角2）を押したときにフォームの検証が正しく機能しない

Question

フォームにユーザー名とパスワードがあり、ユーザーが送信ボタンを押したときに1つまたは両方のフィールドが空白であるというエラーメッセージが表示され、ボタンへのルートを追加しようとすると、ホームページに移動しますが、ボタンにルートを追加すると、アスペクトとしての検証は無視され、フィールドが空白の場合は機能します。これは

<form [ngFormModel]="loginForm" (ngSubmit)="loginUser(loginForm.value)"> 
 
<div class="form-group" [ngClass]="{ 'has-error' : !username.valid && submitAttempt }"> 
 
    <label class="control-label" for="username">Username</label> 
 
    <em *ngIf="!username.valid && submitAttempt">Required</em> 
 
    <input id="username" type="text" class="form-control" placeholder="Username" ngControl="username"> 
 
</div> 
 
<div class="form-group" [ngClass]="{ 'has-error' : !password.valid && submitAttempt }"> 
 
    <label class="control-label" for="password">Password</label> 
 
    <em *ngIf="password.hasError('required') && submitAttempt">Required</em> 
 
    <em *ngIf="password.hasError('minlength') && submitAttempt">Must be at least 8 characters</em> 
 
    <input id="password" type="password" class="form-control" placeholder="Password" ngControl="password"> 
 
</div> 
 
<div class="form-group"> 
 
    <button type="submit" class="btn btn-primary">Register</button> 
 
</div> 
 
</form>

私のHTMLフォームでフォームが有効であるとき、私はそれだけで有効になっていますように、ボタンを無効にしようとしましたが、私は おかげ ngFormとngFormModelの間で少し混乱取得しています

そして、これは私のコンポーネント

import {Component, EventEmitter} from "angular2/core"; 
 
import {Router} from "angular2/router"; 
 
import {ROUTER_DIRECTIVES} from "angular2/router"; 
 
import {Control, ControlGroup, FormBuilder, Validators, FORM_DIRECTIVES} from 'angular2/common'; 
 
//import {UsernameValidators} from './usernameValidators'; 
 
@Component({ 
 
selector: 'LoginHTML', 
 
templateUrl: 'dev/LoginComponents/login-form.component.html', 
 
directives : [FORM_DIRECTIVES] 
 
}) 
 
export class LoginHTMLComponent{ 
 
loginForm: ControlGroup; 
 
username: Control; 
 
password: Control; 
 
submitAttempt: boolean = false; 
 
form: ControlGroup; 
 
constructor(private builder: FormBuilder, private _router: Router) { 
 
this.username = new Control('', Validators.required) 
 
this.password = new Control('', Validators.compose([Validators.required, Validators.minLength(8)])) 
 
this.loginForm = builder.group({ 
 
username: this.username, 
 
password: this.password 
 
}); 
 
} 
 
loginUser(user) { 
 
this.submitAttempt = true; 
 
this._router.navigate(['Dashboard']); 
 
} \t 
 
}

です0

Answer 1

コードで何か自由に行う必要がありますので、フォームでloginUser関数に介入してDashboardにナビゲートしようとしません。しかし、あなたが利用できるフォームの有効性に関する情報を提供しています：

loginUser(user) { 
    this.submitAttempt = true; 
    if (this.loginForm.valid) { 
    this._router.navigate(['Dashboard']); 
    } 
}