Angular2 formBuilder - 兩個驗證器不工作

我有一個文本輸入應該是必需的，並且長於3個字符。當我點擊它時，什麼都不做（鍵入短於3個字符的內容）並單擊，然後添加紅色邊框，否則邊框將變爲綠色。Angular2 formBuilder - 兩個驗證器不工作

export class RegisterpageComponent implements OnInit { 

      userForm: any; 

      constructor(private formBuilder: FormBuilder) { 
      this.userForm = formBuilder.group({ 
       login: ["", Validators.required, Validators.minLength(3)] 
      } 
     ) 
    }

在這裏，我連接上面的formBuilder與窗體和驗證與輸入。

<form [ngFormModel]="userForm" (ngSubmit)="..."> 
    <input class="..." type="text" placeholder="..." ngControl="login" #login="ngForm" /> 
. 
. 
. 
</form>

青菜

input.ng-invalid.ng-touched 
    border-left: 5px solid red 

input.ng-valid.ng-touched 
    border-left: 5px solid green

問題是在這裏（我猜）login: ["", Validators.required, Validators.minLength(3)]

1 *。當我點擊輸入時，通過點擊將其留空，然後我有紅色邊框 - 很好。問題是無論我做什麼，邊框都是紅色的，即使輸入的內容長於3個字符也是如此。爲什麼？

2 *。當我點擊輸入時，使用登錄驗證器作爲login: ["", Validators.minLength(3)]，通過單擊將它留空，然後我有綠色邊框。爲什麼？紅色邊框是當輸入的內容長於3個字符時（此處驗證器工作）

3 *。使用登錄驗證器["", Validators.minLength(3)]和HTML代碼，如<input class="..." type="text" placeholder="..." ngControl="login" #login="ngForm" required />終於有了我想要的東西 - 當我點擊輸入時，通過單擊輸出保留爲空 - 紅色邊框（好），當我輸入長度超過3個字符的東西時 - 綠色邊框（好）。爲什麼2 *不能像那樣工作？

最後 - 什麼是[""作爲驗證器集的第一個參數？感謝你們！

來源

2016-07-20 elzoy

什麼Angular2版本？舊形式或新形式？ –

帶有0.2.0形式的Angular2 2.0.0-rc.4。我不知道它是新的還是舊的。我剛剛在Angular2 API中發現了昨天的formBuilder，它並沒有被棄用。 – elzoy

如果使用'disableDeprecatedForms（），provideForms（）'，並從'@ angular/forms'而不是'@ angular/common'導入表單的東西，那麼你就使用了新的表單。 –

嘗試了下：

this.userForm = formBuilder.group({ 
    login: ["", Validators.compose([ Validators.required, Validators.minLength(3) ]) 
});

來源

2016-07-22 16:31:32 Alexey

我試過這個解決方案，但它只適用於需要驗證。有什麼我錯過了..？ – Praditha

Angular2 formBuilder - 兩個驗證器不工作

回答

相關問題