Demo

Question

Angular表单有一些CSS输入验证类，原始脏和无效。我有一个最小长度的输入，我不想要显示此方案的错误消息：

用户选择/聚焦输入
在不打字的情况下解开它
重新聚焦输入并开始输入，错误消息立即显示最小长度未达到。

用户可以关注输入并决定不为其输入任何内容并稍后返回，当他们这样做时，错误消息会在他们输入内容时显示。

Answer 1

我使用angular doc的示例创建了这个简短版本，该示例要求最小长度为8，但在用户开始输入之前不会显示错误。检查您是否正在寻找这种情况。

HTML：

<form (ngSubmit)="onSubmit()" #heroForm="ngForm">
   <div class="form-group">
     <label for="name">Name</label>
    <input type="text" class="form-control" id="name"
           minlength="8"
           [(ngModel)]="model.name" name="name"
           #name="ngModel">
    <div [hidden]="name.valid || name.pristine"
         class="alert alert-danger">
      Name should be at least 8 characters
    </div>
  </div>
 <!-- - -->
</form>

Answer 2

我玩了一下这一点，我认为你是正确的，你不能把这种行为开箱即用的反应形式给你。但是，您可以创建一个绑定到新类的指令，该类允许您按照自己的方式设置样式。

您创建一个指令，用于侦听Blur上的FormControl事件，并在发生时检查该字段是否无效。如果是这样，你可以设置自己的类，然后根据它来设置样式。

例：

@Directive({
  selector: '[formControl]',
})
export class ValidationStatusDirective {
  isValidated = false;

  constructor(private el: ElementRef){}

  @HostBinding('class.ng-validated') get ngValidated() { return this.isValidated; }
  @HostBinding('class.ng-unvalidated') get ngUnvalidated() { return !this.isValidated; }

  @HostListener('blur') validationStatusChanged(){
    if(!this.isValidated &&
        this.el.nativeElement.classList.contains('ng-invalid') &&
        this.el.nativeElement.value.length > 0){
      this.isValidated = true;
    }
  }
}

然后您根本不必修改HTML，只需在输入为ng-invalid和ng-validated

时设置样式以供参考：

<input class="form-control"
    [formControl]="name"
    #input
    placeholder="Enter 3 or more characters">

样式：

input.ng-invalid.ng-validated{
    border-color: red;
    background-color: pink;
}

未输入的角度形式输入验证类

2 个答案:

Demo