如何将invalid设置为"mat-form-field"？

Question

输入数据:角度6，角度材料2。

我的自定义验证“密码匹配器”设置为"passGroup“无效。示例：

         <div ngModelGroup="passGroup" password-matcher #passGroup="ngModelGroup">
             <div class="formGroup">
                <mat-form-field>
                    <input
                        matInput
                        type="password"
                        class='inputs'
                        [(ngModel)]='reg.password'
                        name='password'
                        required
                        minlength="8"
                        (input)='onChangeReg(reg)'
                        >
                </mat-form-field>
            </div>

            <div class="formGroup">
                <mat-form-field class="example-full-width">
                    <input
                        matInput
                        type="password"
                        class='inputs'
                        [(ngModel)]='reg.repeatPassword'
                        name='repeatPassword'
                        required
                        minlength="8"
                        (input)='onChangeReg(reg)'
                        >
                </mat-form-field>
            </div>
        </div>

如果ngModelGroup为invalid，如何将invalid设置为mat-form-field？例如：<mat-form-field setValidation='passGroup.invalid'>

Answer 1

理论上，您需要为MatInput控件提供一个自定义ErrorStateMatcher。Angular Material有一个here示例。在ErrorStateMatcher的isErrorState函数中，您需要访问控件的父组，并使用它的状态返回字段控件的状态。

然而，我不确定这是否会像预期的那样工作。由于父组状态依赖于子控件状态，因此您正在创建循环依赖项。因此，您可能需要检查其他子控件是否存在错误，而不是显式检查父控件的状态。

从设计的角度来看，通常您可能不应该这样做，因为显示错误的目的是为了让用户注意到哪些字段需要更正。将没有错误的字段标记为有错误的字段时，如果它是另一个有错误的字段，则会使用户感到困惑。在只有用户名和密码字段的登录控件的情况下，我可以看到为了阻止黑客攻击，这可能是有益的。