Question

我有一个文本输入应该是必需的并且超过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)]，HTML代码如<input class="..." type="text" placeholder="..." ngControl="login" #login="ngForm" required />最终我有我想要的 - 当我点击输入时，通过单击输出将其留空 - 红色边框（好），当我键入的内容超过3个字符 - 绿色边框（好）。为什么2 *不能那样工作？

最后 - 作为验证器设置的第一个参数，[""是什么？谢谢你们！

Answer 1

尝试下一个：

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

Answer 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个字符。但是，如果输入字段无效，则会通过指示跨度（*）来指示格式无效。

Answer 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>

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

3 个答案: