Angular表单中存在一些原始脏和无效的CSS输入验证类。我有一个最小长度的输入，我不希望显示在此方案中的错误消息：未键入的角度表单输入验证类

用户选择/注重输入
unfocuses它没有它
再焦点输入任何内容输入并开始输入，错误信息立即显示说不符合最小长度。

用户可能会关注输入并决定不输入任何内容，稍后再回来，当他们输入错误信息时会立即显示。

来源

2017-07-14 el_pup_le

我认为原始是我正在寻找，可能会删除这个问题 –

是的，这是什么原始和肮脏的，你可以在这里找到示例https://angular.io/guide/forms#track-control-state -and-validity-with-ngmodel – Nehal

实际上原始不能真正用于解决这种情况下的问题，我会保持这个问题开放 –

我这个玩逛了一下，我认为你是正确的，你不能让这种行为开箱即用什么反应形式给你。然而，你可以制定一个指令，将绑定到一个新的类，这将允许你设置你想要的样式。

您创建了一个指令，用于侦听FormControl上的Blur事件，以及它何时发生检查以查看该字段是否无效。如果是的话，你可以设置你自己的班级，然后根据这个设定风格。

例子：

@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; 
    } 
    } 
}

然后，您不必在投入既是ng-invalid和ng-validated

作为参考来修改HTML不惜一切，然后只设置样式：

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

样式：

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

Demo

来源

2017-07-14 13:29:22

我使用angular doc的示例创建了这个短版本，它需要最小长度为8，但直到用户开始输入时才显示错误。检查这是否是你正在寻找的情况。

Code demo

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>

来源

2017-07-14 12:25:32 Nehal

未键入的角度表单输入验证类

回答

Demo

相关问题