FormControl`s是NG-有效雖然FromGroup設爲ng-無效

Question

我稱之爲「等級」的嵌套形式組：

儘管嵌套形式組的成績'應用了NG-無效類的兒童表格控件確實應用了ng有效的類。

爲什麼無效不是從嵌套窗體繼承到其控件？

this.schoolyearForm = this.formBuilder.group({ 
    name: [this.createSchoolyear.name, [Validators.minLength(3), Validators.required]], 
    endDate: [this.createSchoolyear.endDate, Validators.required], 
    startDate: [this.createSchoolyear.startDate, Validators.required], 
    grades: this.formBuilder.group({ 
    bestGrade: [this.createSchoolyear.bestGrade, Validators.required], 
    worstGrade: [this.createSchoolyear.worstGrade, Validators.required] 
    }, { validator: this.gradesCompare }) 
}); 


    gradesCompare(c: AbstractControl): { [key: string]: boolean } | null 
    { 
    let bestGradeControl = c.get("bestGrade"); 
    let worstGradeControl = c.get("worstGrade"); 

    if (bestGradeControl.pristine || worstGradeControl.pristine) 
     return null; 

    if (bestGradeControl.value === worstGradeControl.value) 
    { 
     return { "match": true }; 
    } 
    return null; 
    } 

看到紅色和綠色邊框：

在FormControl`s不應用CSS NG-無效類：

.ng-valid:not(form) { 
    border-left: 5px solid #42A948; /* green */ 
} 

.ng-invalid:not(form) { 
    border-left: 5px solid #a94442; /* red */ 
} 

因此它們被鑲上綠色，但我希望他們是紅色的！

UPDATE

我改變了用戶奔plunkr這一個：

https://plnkr.co/edit/VobcC0Qw1EBDytYdkzru?p=preview

它的工作原理，因爲我希望它會工作，但它似乎是一種解決方法給我。多ng級的表達難以理解...

請Ben抓住這個PLUNK作爲您的解決方案，但只有當您真誠地認爲您會對解決方案感到滿意。如果不嘗試找到更好的解決方案，現在你完全知道我的要求。

其他人也歡迎加入這個挑戰，現在你知道驗證/ UI /錯誤消息應該如何表現。

Answer 1

技術上，具體形式控制bestGrade和worstGrade根據自己的驗證是有效的。只有他們的組有錯誤。如果組無效，Angular無法知道您控制了哪些內容會導致無效。如果您願意，您可以將信息提供給特定控件是否存在特定的組驗證錯誤，並且這會導致它們在無效時顯示紅色，或者它們的組具有匹配錯誤。

如果沒有默認設置，角色進程組驗證和控制驗證的順序將覆蓋控件在自身有效（必需條件滿足）時在控件上手動添加ng-invalid的順序。這就是爲什麼我在這裏使用另一個班級matchError而不是ng-invalid。否則ng-invalid將被刪除並由ng-valid替換爲之後的對照驗證ng-invalid由ngClasses或等同的類修改添加。

所以不是

<select formControlName="bestGrade"> 

，你可以以同樣的方式使用

<select [class.matchError]="schoolyearForm.get('grades').hasError('match')" formControlName="bestGrade"> 

，而不是

<select formControlName="worstGrade"> 

可以使用

<select [class.matchError]="schoolyearForm.get('grades').hasError('match')" formControlName="worstGrade"> 

編輯： 由於OP在使用選擇標籤而不是輸入（讀取聊天）時仍然存在問題，我還建議從驗證器本身中刪除雙重原始性要求（按照慣例，我們通常會檢查此處顯示錯誤的位置代替）。由於OP仍然存在問題，因此我準備展示他的應用程序的虛擬（以及醜陋）版本來幫助調查問題。

的plunkr，可以發現：

https://plnkr.co/edit/Gt5skDUOXfEaxsZreOkh

編輯2：更新處理類設定順序時的驗證是團體和個人組之間檢查plnkr URL控制

編輯3：調整答案在這裏本身反映OP的需要沒有默認情況下已經安裝在最新的plnkr從編輯2