嵌套FormGroup的FormControl是ng-valid，尽管FromGroup是ng-invalid [英] FormControl`s of nested FormGroup are ng-valid although FromGroup is ng-invalid

问题描述

我有一个称为成绩"的嵌套表单组:

I have a nested form group called 'grades':

尽管嵌套表单组"grades"已应用ng-invalid类，但子表单控件确实已应用了ng-valid类.

Although the nested form group 'grades' has the ng-invalid class applied the children form controls do have applied the ng-valid class.

为什么无效不能从嵌套表单继承到控件?

Why is the invalidation not inherited from the nested form to its controls?

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上没有应用cs ng无效类:

On the FormControl`s are the css ng-invalid classes not applied:

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

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

因此它们以绿色为边框，但是我希望它们是红色！

Therefore they are bordered green, but I expected them to be red!

更新

我将用户Ben的the窃改为了:

I changed the plunkr of user Ben to this one:

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

它可以按我希望的方式工作，但对我来说似乎是一种解决方法.多个ng-class表达式很难理解...

It works as I wished it would work, but it seems like a workaround to me. The multiple ng-class expression are hard to understand...

请Ben像您一样抓住这个笨蛋，将其发布为解决方案，但前提是您诚实地认为您也会对解决方案感到满意.如果您不完全了解我的要求，请不要尝试寻找更好的解决方案.

Please Ben grab this plunkr as yours, post it as solution, but only if you think honestly you would also be satisfied with the solution. If not try to find a better solution please, now that you fully know my requirements.

现在您也知道其他人应该如何验证/ui/错误消息，也欢迎其他人加入这一挑战.

Others are also welcome to join this challenge, now that you know how the validation/ui/error-messages should really behave.

推荐答案

从技术上讲，特定的表单控件 bestGrade 和 worstGrade 根据其自己的验证器有效.只有他们的小组有错误.如果组无效，Angular无法知道您要使哪个控件失效.您可以根据需要向特定控件提供是否存在特定组验证错误的信息，这将导致它们在无效时或它们的组出现 match 错误时会以红色边框显示.

Technically, the specific form controls bestGrade and worstGrade are valid according to their own validators. Only their group has an error. Angular can't know you which controls you would want to invalidate if the group becomes invalid. You could make the information whether there was that specific group validation error onto the specific controls if you wished, and this would result in them being bordered red when they are invalid OR their group has the match error.

在没有默认设置的情况下，当控件自身有效时(满足所需条件)，角度过程组验证和控件验证的顺序将覆盖在控件上手动添加ng-invalid的顺序.这就是为什么我在这里 matchError 而不是 ng-invalid 使用另一个类的原因.否则，在由ngClasses添加了 ng-invalid 或等效类修改后，控件验证将删除 ng-invalid 并由 ng-valid 代替.

Without default, the order in which angular processes group validation and control validation would override any manual adding of ng-invalid on the control when the control becomes valid on its own (required condition fulfilled). This is why I am using another class here matchError rather than ng-invalid. Otherwise ng-invalid would be removed and replaced by ng-valid by the control validation after ng-invalid is added by ngClasses or equivalent class modification.

所以不是

<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，演示了他的应用程序的有效假人(丑陋)版本，以帮助调查此问题.

As OP still had issues while using select tags instead of input (read chat), I have recommended also removing the double pristine-ness requirement from the validator itself (by convention, we normally would check this where errors are displayed instead). Because the OP still has issues, I have prepared a plunkr demonstrating a working dummy (and ugly) version of his app to help investigate the issue.

punkr可以在以下位置找到:

The plunkr can be found at:

https://plnkr.co/edit/Gt5skDUOXfEaxsZreOkh

更新plnkr URL，以便在检查组和单个组控件之间的验证时处理类设置顺序

Edit 2: plnkr URL updated to deal with class setting order when validation are checked between group and individual group controls

本身在此处调整了答案，以反映OP对无默认设置的需求，如编辑2的最新plnkr中已设置的那样.

Edit 3: Adjusted the answer here itself to reflect the OP's need for without defaults as was already setup in the latest plnkr from Edit 2

这篇关于嵌套FormGroup的FormControl是ng-valid，尽管FromGroup是ng-invalid的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！