Angular2 formBuilder - 两个验证器不起作用答案

【问题标题】：Angular2 formBuilder - two validators don't workAngular2 formBuilder - 两个验证器不起作用
【发布时间】：2016-07-20 18:43:41
【问题描述】：

我有一个文本输入是必需的，并且长度超过 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 代码，我终于有了我想要的——当我点击输入时，通过点击将其留空——红色边框（好），当我输入超过3 个字符的内容时——绿色边界（好）。为什么 2* 不能这样工作？

最后 - ["" 作为验证器集的第一个参数是什么？谢谢各位！

【问题讨论】：

什么 Angular2 版本？旧表格还是新表格？
Angular2 2.0.0-rc.4 与 0.2.0 形式。不知道是新的还是旧的。我昨天刚刚在 Angular2 API 中找到了 formBuilder，它并没有被弃用。
如果您使用disableDeprecatedForms(), provideForms(), 并从@angular/forms 导入表单内容而不是@angular/common，那么您使用的是新表单。
好吧，我现在正尝试在@angular/forms 上重写它（上面的示例基于@angular/common），我对No value accessor for 'login' 有疑问
“无值访问器”似乎与验证无关。我想拥有 Plunker 会有所帮助。

标签： validation angular formbuilder

【解决方案1】：

尝试下一个：

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

【讨论】：

我已经尝试过这个解决方案，但它仅适用于所需的验证。有什么我错过了..？

【解决方案2】：

试试这样。它对我有用。

this.formvalid = new FormGroup({
  login: new FormControl('', [Validators.required, Validators.minLength(3)])
  }); 

<div [formGroup]=" formvalid">
<label id="label" >Cheque No</label>
  <span *ngIf="formvalid.controls.login.status == 'INVALID' && formvalid.touched" class="required" aria-required="true"> * </span>      
    <input type="text" formControlName="login" [(ngModel)]="login" class="form-control form-control-sm"  placeholder="login">        
</div>

在输入字段中，它允许输入少于 3 个字符。但如果输入字段无效，则会通过指示跨度（*）来指示表单无效。

【讨论】：

【解决方案3】：

请以这种方式创建表单并更新您的组件，因为您已经在异步验证器中创建了 minlength 验证器

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

 <form role="form" [formGroup]="userForm" (ngSubmit)="onSubmit(userForm)">
     <div>
       <input formControlName="login">    
    </div>
</form>

【讨论】：