入力されていない角型入力検証クラス

Question

角度のあるフォームの汚れていない、無効なCSS入力入力クラスがあります。私は最小の長さとの入力を持っていると私は、このシナリオのために示すエラーメッセージが表示されたくない：

1. 、ユーザが選択/入力
2. はそれで何も入力せずに
3. 再焦点をそれをunfocuses焦点を当てて入力が開始され、入力が開始されると、最小長が満たされていないことを示すエラーメッセージがすぐに表示されます。

ユーザは入力を集中して、何も入力せずに後で戻ってくることがあります。エラーメッセージが入力されるとすぐに表示されます。

Answer 1

私は少しのためにこれをいじって、私はあなたがどのような反応性の形で箱から出して、この動作を得ることができないことを正しいことだと思いますあなたに教えてください。ただし、新しいクラスにバインドする指示を作成することができます。これにより、希望のスタイルにスタイルを設定できます。

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

あなたは、すべての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; 
} 

Demo

Answer 2

最小の長さ8を必要とするが、ユーザーが入力を開始するまでエラーを表示しないangle docの例を使用してこの短いバージョンを作成しました。これがあなたが探しているケースかどうかを確認してください。

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>