Angular 4＆Bootstrap 4 - 鞏固驗證類

Question

今天我發現驗證並不總是在我的應用程序中正確顯示。在一個特定示例中，如果選擇<option [ngValue]="null">，角度將失敗required;然而，瀏覽器看到<option value="0: null">並且不會在required上失敗。

我想切換到使用自舉的服務器端驗證類顯示驗證時，手動控制：https://getbootstrap.com/docs/4.0/components/forms/#server-side

角具有ng-valid和ng-invalid和Bootstrap具有is-valid和is-invalid。我不想複製bootstrap CSS，只需更改名稱。相反，它會是很好，如果有檢測角類和自動添加引導等價的方式，這樣的事情：

<select #s="ngModel" 
     id="s" 
     name="s" 
     [ngModel]="myModel" 
     required 
     class="form-control" 
     [class.is-valid]="s.valid" 
     [class.is-invalid]="s.invalid"> 
    <option [ngValue]="null">Choose a value</option> 
    <option *ngFor="let item of items" [ngValue]="item.id">{{item.Name}}</option> 
</select> 

如果有辦法做到這一點，而無需重複這些[class...]屬性在每個輸入上，這都是理想的。

Answer 1

我實際上看了一下Angular源代碼，看看他們是如何普遍應用ng-valid和ng-invalid。 https://github.com/angular/angular/blob/4.4.5/packages/forms/src/directives/ng_control_status.ts#L38-L57

我最終採取自己的代碼，並創造我自己的指令，簡單地發出引導驗證類：

import { Directive, Self } from "@angular/core"; 
import { NgControl } from "@angular/forms"; 

const controlStatusHost = { 
    "[class.is-valid]": "ngClassValid", 
    "[class.is-invalid]": "ngClassInvalid" 
}; 

@Directive({ selector: "[formControlName],[ngModel],[formControl]", host: controlStatusHost }) 
export class BSControlStatusDirective { 
    public constructor(@Self() private control: NgControl) { 
    } 

    get ngClassValid(): boolean { 
     if (this.control.control == null) { 
      return false; 
     } 
     return this.control.control.valid; 
    } 

    get ngClassInvalid(): boolean { 
     if (this.control.control == null) { 
      return false; 
     } 
     return this.control.control.invalid;; 
    } 
} 

這是host財產上真的做所有的魔術的裝飾。很簡約！