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

相關問題