Angular2：得到驗證限制

例如，我有這樣的形式：Angular2：得到驗證限制

<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)]] 
    }); 
    } 

}

我怎樣才能得到我的最大長度&值MINLENGTH？所以，我可以改變：

5 characters minimum, 12 characters maximum這樣的： {{form.get('username').minlength}} characters minimum, {{form.get('username').maxlength}} characters maximum

這可能嗎？

來源

2017-04-18 brabertaser19

我沒有解決方案。您可以從錯誤本身獲取最小長度或最大長度，但不能同時得到兩者。

爲了得到一個或另一個可以使用的語法如下：

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

但這不是完全你想要什麼，因爲在上述情況下，你沒有辦法訪問最大長度是什麼當最小長度驗證器給你錯誤。起初，我認爲從表單控件中查找驗證器是一件簡單的事情。但顯然這是不被角尚未支持的特性：https://github.com/angular/angular/issues/13461

所以在這一點的唯一可能的解決方案，我認爲，是創建結合使用MINLENGTH和最大長度的驗證，並同時設置自己的自定義驗證。

下面是我做到的。我創建了我的驗證服務自定義驗證程序是這樣的：

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

我這樣設置驗證：

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

，然後我可以顯示minLength和maxLength同時在我的模板中（在這個cas中） e。使用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>

希望這有助於！

來源

2017-04-24 00:53:41 bkinsey808

Angular2：得到驗證限制

回答

相關問題