Angular2：たとえばバリ制限

Question

を取得し、私は、このような形式になります。

<form [formGroup]="form" (ngSubmit)="onSubmit()"> 

    <input type="text" formControlName="username"> 
    <div ngxErrors="username"> 
    <div ngxError="required" [when]="['dirty', 'touched']"> 
     Username is required 
    </div> 
    </div> 

    <input type="text" formControlName="password"> 
    <div ngxErrors="password"> 
    <div ngxError="required" [when]="['dirty', 'touched']"> 
     Password is required 
    </div> 
    <div [ngxError]="['minlength', 'maxlength']" [when]="['dirty', 'touched']"> 
     5 characters minimum, 12 characters maximum 
    </div> 
    </div> 

</form> 

と、このコントローラ：

export class AppComponent implements OnInit { 

    form: FormGroup; 

    constructor(
    private fb: FormBuilder 
) {} 

    ngOnInit() { 
    this.form = this.fb.group({ 
     username: ['', [Validators.required]], 
     password: ['', [Validators.required, Validators.minLength(5), Validators.maxLength(12)]] 
    }); 
    } 

} 

は、どのように私は私のMAXLENGTH & MINLENGTH値を得ることができますか？私は変更することができるように：

5 characters minimum, 12 characters maximumを次のように： {{form.get('username').minlength}} characters minimum, {{form.get('username').maxlength}} characters maximum

それは可能ですか？

Answer 1

解決策はありません。エラー自体から、minlengthまたはmaxlengthは取得できますが、両方を取得することはできません。

1または他のあなたは、このような構文を使用することができます取得するには：

<div ngxErrors="username" #myError="ngxErrors"> 
    <div ngxError="minlength" when="dirty"> 
     Min length should be {{ myError.getError('minlength')?.requiredLength }} 
    </div> 
</div> 

が、上記の場合には、あなたがMAXLENGTHが何であるかにアクセスする方法がありませんので、これは、あなたが望むものは完全ではありませんがminlengthバリデータがエラーを出しているとき 最初は、フォームコントロールからバリデーターを検索するのは簡単なことだと思っていました。しかし、どうやらこれはまだ、角度によってサポートされていない機能です。https://github.com/angular/angular/issues/13461

したがって、この時点での唯一の可能な解決策は、私が思うに、MINLENGTHとMAXLENGTHの検証を組み合わせて、両方の設定独自のカスタムバリデータを作成することです。

ここで私はそれをしました。

this.usernameOrEmail = 
 
     new FormControl('', [ 
 
     Validators.required, 
 
     ValidationService.minAndMaxLengthValidator({ 
 
      minLength: 2, 
 
      maxLength: 12, 
 
     })]);

そして、私は表示することができます。私はこのようなバリデータを設定し

static minAndMaxLengthValidator(options): ValidatorFn { 
 
    return (control: AbstractControl): { 
 
    [key: string]: any 
 
    } => { 
 
    if (
 
     control.value.length > options.maxLength || 
 
     control.value.length < options.minLength 
 
    ) { 
 
     return { 
 
     minAndMaxLengthError: options 
 
     }; 
 
    } 
 
    return null; 
 
    } 
 
}

：私はこのように私のバリデータサービスでカスタムバリデータを作成しました私のテンプレートでminLengthとmaxLengthを同時に（このカス電子ngxErrorsを使用して）

<md-input-container> 
 
     <input 
 
     mdInput 
 
     placeholder="Username or Email Address" 
 
     formControlName="usernameOrEmail" 
 
     required 
 
     > 
 
    </md-input-container> 
 
    <div 
 
     ngxErrors="usernameOrEmail" 
 
     #usernameOrEmailError="ngxErrors" 
 
    > 
 
     <div 
 
     ngxError="required" 
 
     [when]="['dirty', 'touched']" 
 
     >Username or Email Address is required</div> 
 
     <div 
 
     ngxError="minAndMaxLengthError" 
 
     [when]="['dirty', 'touched']" 
 
     > 
 
     Username or Email Address must be min length 
 
     {{ 
 
      usernameOrEmailError.getError('minAndMaxLengthError')?.minLength 
 
     }} 
 
     and max length 
 
     {{ 
 
      usernameOrEmailError.getError('minAndMaxLengthError')?.maxLength 
 
     }} 
 
     </div> 
 
    </div>

この情報がお役に立てば幸い！