web-dev-qa-db-ja.com

Angular 2フォーム検証、minLengthバリデーターが機能していません

私は次のAngular 2形式：

<register>
    <form [ngFormModel] = "registrationForm">
        <div class = "form-group">
            <label class = "control-label" for="email">Email</label>
            <input class = "form-control" type="email" id="email" ngControl="email" #email="ngForm">
        </div>
        <div *ngIf = "email.touched && email.errors">
            <div *ngIf = "!email.errors.required && email.errors.underscoreNotFound" class = "alert alert-danger">
                <span>Underscore is required</span> 
            </div>
            <div *ngIf = "email.errors.required" class = "alert alert-danger">
                <span>Email is required</span>
            </div>
        </div>
        <div class = "form-group">
            <label class = "control-label" for="password">Password</label>
            <input class = "form-control" type="password" id="password" ngControl="password" #password="ngForm">
        </div>
        <div *ngIf = "password.touched && password.errors">
            <div *ngIf = "password.errors.minLength && !password.errors.required" class = "alert alert-danger">
                <span>Password should contain 6 characters</span>
            </div>  
            <div *ngIf = "password.errors.required" class = "alert alert-danger">
                <span>Password is required</span>
            </div>          
        </div>
    </form>
</register>

これはバリデーターを実装したコンポーネントです：

import {Component} from '@angular/core';
import {Control, ControlGroup, FormBuilder, Validators} from '@angular/common';
import {CustomValidator} from './CustomValidator';

@Component({
    selector: 'register',
    templateUrl: './app/authentication/register_validation/register.html',
})

export class RegisterComponent{
    registrationForm: ControlGroup;

    constructor(formBuilder:FormBuilder)
    {
        this.registrationForm = formBuilder.group({
            email: ['',Validators.compose([Validators.required, CustomValidator.underscore])], 
            password: ['',Validators.compose([Validators.required,Validators.minLength(6)])]
        });
    }

}

このフォームでは、emailフィールドは両方のバリデーターで正常に機能しています。つまり、何も入力しない場合、"Email is required"メッセージ、何か入力し始めると、"Underscore is required"メッセージと入力すると"_"すべてのエラーメッセージが消えます。ただし、passwordフィールドにこのような2つのバリデーターを適用しようとすると、機能しません。パスワードを入力しないと、メッセージが"Password is required"。しかし、6文字未満の文字を入力すると、minLengthメッセージがまったく表示されません。このコードの何が問題になっていますか？

validationangularangular2-forms
30
Nilakshi Naphade

エラーキーはminlengthではなくminLength です：

<div *ngIf = "password.hasError('minlength') && !password.hasError('required')" class = "alert alert-danger">
  <span>Password should contain 6 characters</span>
</div>
70
cexbrayat

これは本当に私を捕まえただけでなく、マークアップのキーを間違ったコードに持っていたものと一致させました。

サンプルコード

password1: ['', [Validators.required, Validators.minLength(8)]],

サンプルマークアップ

*ngIf="registrationRequest.get('password1').hasError('minlength')"

コードでは、minlengthがすべて小文字であることに注意してください。

19
Remotec

私は同じ問題に直面していましたが、非常に多くの研究の後にこれで解決策を得ました、minlength insted of minLengthを使用してくださいここに例を示します。

<div *ngIf = "password.errors.minlength && !password.errors.required" class = "alert alert-danger">
      <span>Password should contain 6 characters</span>
    </div>

の代わりに

<div *ngIf = "password.errors.minLength && !password.errors.required" class = "alert alert-danger">
  <span>Password should contain 6 characters</span>
</div>

これが誰かを助けることを願って、ありがとう

1
Narendra Solanki