web-dev-qa-db-ja.com

Angular 5フォーム検証（必須）が機能しない

TypeScriptでAngular 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>
                &nbsp;
                <a class="btn rounded-btn" [routerLink]="['/signup']">Sign up</a>
            </form>
        </div>
    </div>
</div>

ご覧のとおり、私はエラーを個別に表示しようとしています。 「required」属性の場合、このerrors.requiredのようなエラーメッセージを取得しています。しかし、それは機能していません。しかし、以下のように「有効」を使おうとすると、うまくいきます。

loginForm.controls['email'].invalid

ただし、エラーごとに異なるメッセージを表示したいので、エラーを個別に取得したいと思います。どうすればこれを修正できますか？ 「loginForm.controls ["email"]。errors.required」を使用すると機能しないのはなぜですか？異なる検証ルールに対して異なるメッセージを表示する正しい方法は何ですか？

angularvalidationangular5angular-forms
3
Wai Yan Hein

次のように、errorsプロパティを使用できます。

loginForm.controls['email'].errors

エラーがない場合はnullを返し、そうでない場合は次のようなオブジェクトを返します。

{ required : true }

次に、次のように、人間が読めるエラーメッセージを返す関数を作成する必要があります。

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;
}
2
user184994

ボタンの(loginForm.valid)または[disabled]プロパティ内で*ngIfを使用する必要があります。これにより、フォームがtsファイルから検証されているかどうかが自動的にチェックされます。

さらに、tsファイル内に、検証を書き込むことができます。

new FormControl('',[Validators.required])

このような。

0
Aayush