时间戳

首页 > 解决方案 > 如何将无效设置为“mat-form-field”？

angular - 如何将无效设置为“mat-form-field”？

问题描述

输入数据：角度 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>

mat-form-field如果ngModelGroup 是，我如何设置无效invalid？例如： <mat-form-field setValidation='passGroup.invalid'>

标签： angularangular-material2

解决方案

从理论上讲，您需要为ErrorStateMatcher控件MatInput提供自定义。Angular Material这里有一个例子。在ErrorStateMatcher'sisErrorState函数中，您将需要访问控件的父组并使用它的状态来返回字段控件的状态。

但是，我不确定这是否会按预期工作。因为父组状态依赖于子控件状态，所以您正在创建循环依赖。因此，您可能需要检查其他子控件的错误，而不是显式检查父状态。

从设计的角度来看，通常您可能不应该这样做，因为显示错误的目的是让用户注意哪些字段需要更正。将一个没有错误的字段标记为错误，而另一个字段有错误会混淆用户。对于只有用户名和密码字段的登录控件，我可以看到这可能有助于阻止黑客攻击。

推荐阅读