Angular2 formBuilder - 2つのバリデータが機能しません

Question

私は1つのテキスト入力を必要とし、3文字以上必要です。私がクリックすると、何もしないで（3文字より短いものを入力して）、赤い枠線を追加します。そうでない場合、枠線は緑色になります。

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> 

SASS

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)]、最終的に<input class="..." type="text" placeholder="..." ngControl="login" #login="ngForm" required />のようなHTMLコードを使用していました。入力をクリックすると、赤い枠線（良い）をクリックすると空白のままになりました。 。なぜ2 *がそんなにうまくいかないのですか？

最後に、バリデータセットの最初のパラメータとして[""は何ですか？君たちありがとう！

Answer 1

は、次を試してみてください。

何Angular2バージョン

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