Angular Pattern Validation 模板驱动的表单从 ngFor 循环中获取经过验证的元素

Question

我正在为我的 Angular 9 项目使用 Angular 模式验证模板驱动表单。 我有我需要在我的表单中验证的属性列表，所以我试图将该 html 代码放在 *ngFor 循环中以减少我的代码：

<form #securityForm="ngForm" class="validation-form adeco-form" >
    <ul lass="text-left" >
        <div *ngFor="let data of items[0]; let i = index;">
            <li class="col-xs-12 p0 pt-sm">
                <div class="col-xs-10 col-lg-11 ph0 pt">
                    {{securitySetting.currentSecuritySettings[data].displayName}}
                </div>
                <div class="col-xs-2 col-lg-1">
                    <input class="k-textbox mb-sm col-xs-12" name="{{data}}"
                           [ngModel]="securitySetting.currentSecuritySettings[data].value"
                           required [pattern]="securitySetting.currentSecuritySettings[data].validationExpression" ref-data="ngModel">
                </div>
                <div *ngIf="data.errors?.pattern || data.errors?.required" class="validation-msg col-xs-12">
                    {{securitySetting.currentSecuritySettings[data].validationErrorMessage}}
                </div>
            </li>
        </div>
    </ul>
</form> 

我的控制器看起来像：

@Component({
  selector: 'app-settingssecurity',
  templateUrl: './settingssecurity.component.html',
  styleUrls: ['./settingssecurity.component.css']
})
export class SettingssecurityComponent implements OnInit {

    items = [
        ['validate_password_regexp_minlength', 'validate_password_regexp_minlower', 'validate_password_regexp_minupper', 'validate_password_regexp_minnumeric', 'validate_password_regexp_minspecial'],
        ['password_expiration', 'password_expiration_notification_enabled', 'password_expiration_notification'],
        ['distinct_password_history'],
        ['secret_answers_attempts', 'password_reset_expiration_delay', 'secret_questions_enabled'],
        ['login_tamper_mode_attempts', 'login_tamper_mode_attempts_delay', 'login_tamper_mode_attempts_reset_delay', 'login_block_attempts'],
        ['accunt_inactivity_block'],
        ['session_inactivity_logout']
    ];
    
    securitySetting = {
        isPCIDSS: true,
        securitySettingsPCI: {},
        securitySettingsCustom: {},
        currentSecuritySettings: {},
        munitPMSsections: {},
        lockAccess: {}
    };
    
    ...
}

当我运行此代码时，我的浏览器不会返回任何错误，我的表单如下所示：

但不幸的是，我的模式代码验证错误不起作用。

任何人都知道我可以在我的输入名称中添加什么 ref-data="ngModel" 或者我可能需要更改其他内容才能看到我的表单的验证错误？

如果我需要提供更多详细信息，请告诉我

Answer 1

我要做的第一件事是仔细检查 ngIf 是否通过：

 <div *ngIf="data.errors?.pattern || data.errors?.required" ...>put something here, like foobar</div>

从外观上看，您正在尝试引用“data.errors”，这不是一回事。 在这种情况下，数据是数组中的一个字符串：

let data of items[0]


items[0] = 
 ['validate_password_regexp_minlength', 'validate_password_regexp_minlower', 'validate_password_regexp_minupper', 'validate_password_regexp_minnumeric', 'validate_password_regexp_minspecial'],

要访问表单中的元素，您通常执行#name="ngModel" 之类的操作，然后在其他地方说*ngIf="name.errors"。

在你的情况下它可能仍然有效，因为 ngfor 中的所有内容都是它自己的模板，但它可能需要一些时髦（也许你可以做一些类似 #name{{i}}="{{data}}" 的事情，我不确定）

听起来像是一个反复试验的事情，发回你最终的地方！

Answer 2

我实际上只是通过摆脱循环找到了解决方法：

<ul [hidden]="tabCollapseFlag[0]" class="text-left" >
    <li class="col-xs-12 p0 pt-sm">
        <div class="col-xs-10 col-lg-11 ph0 pt">
            {{securitySetting.currentSecuritySettings[items[0][0]]?.displayName}}
        </div>
        <div class="col-xs-2 col-lg-1">
            <input class="k-textbox mb-sm col-xs-12" name="items[0][0]"
                   [ngModel]="securitySetting.currentSecuritySettings[items[0][0]].value"
                   required [pattern]="securitySetting.currentSecuritySettings[items[0][0]].validationExpression" #input1="ngModel">
        </div>
        <div *ngIf="input1.errors?.pattern || input1.errors?.required" class="validation-msg col-xs-12">
            {{securitySetting.currentSecuritySettings[items[0][0]].validationErrorMessage}}
        </div>
    </li>

    <li class="col-xs-12 p0 pt-sm">
        <div class="col-xs-10 col-lg-11 ph0 pt">
            {{securitySetting.currentSecuritySettings[items[0][1]]?.displayName}}
        </div>
        <div class="col-xs-2 col-lg-1">
            <input class="k-textbox mb-sm col-xs-12" name="items[0][1]"
                   [ngModel]="securitySetting.currentSecuritySettings[items[0][1]].value"
                   required [pattern]="securitySetting.currentSecuritySettings[items[0][1]].validationExpression" #input2="ngModel">
        </div>
        <div *ngIf="input2.errors?.pattern || input2.errors?.required" class="validation-msg col-xs-12">
            {{securitySetting.currentSecuritySettings[items[0][1]].validationErrorMessage}}
        </div>
    </li>

    <li class="col-xs-12 p0 pt-sm">
        <div class="col-xs-10 col-lg-11 ph0 pt">
            {{securitySetting.currentSecuritySettings[items[0][2]]?.displayName}}
        </div>
        <div class="col-xs-2 col-lg-1">
            <input class="k-textbox mb-sm col-xs-12" name="items[0][2]"
                   [ngModel]="securitySetting.currentSecuritySettings[items[0][2]].value"
                   required [pattern]="securitySetting.currentSecuritySettings[items[0][2]].validationExpression" #input3="ngModel">
        </div>
        <div *ngIf="input3.errors?.pattern || input3.errors?.required" class="validation-msg col-xs-12">
            {{securitySetting.currentSecuritySettings[items[0][2]].validationErrorMessage}}
        </div>
    </li>

    <li class="col-xs-12 p0 pt-sm">
        <div class="col-xs-10 col-lg-11 ph0 pt">
            {{securitySetting.currentSecuritySettings[items[0][3]]?.displayName}}
        </div>
        <div class="col-xs-2 col-lg-1">
            <input class="k-textbox mb-sm col-xs-12" name="items[0][3]"
                   [ngModel]="securitySetting.currentSecuritySettings[items[0][3]].value"
                   required [pattern]="securitySetting.currentSecuritySettings[items[0][3]].validationExpression" #input4="ngModel">
        </div>
        <div *ngIf="input4.errors?.pattern || input4.errors?.required" class="validation-msg col-xs-12">
            {{securitySetting.currentSecuritySettings[items[0][3]].validationErrorMessage}}
        </div>
    </li>

    <li class="col-xs-12 p0 pt-sm">
        <div class="col-xs-10 col-lg-11 ph0 pt">
            {{securitySetting.currentSecuritySettings[items[0][4]]?.displayName}}
        </div>
        <div class="col-xs-2 col-lg-1">
            <input class="k-textbox mb-sm col-xs-12" name="items[0][4]"
                   [ngModel]="securitySetting.currentSecuritySettings[items[0][4]].value"
                   required [pattern]="securitySetting.currentSecuritySettings[items[0][4]].validationExpression" #input5="ngModel">
        </div>
        <div *ngIf="input5.errors?.pattern || input5.errors?.required" class="validation-msg col-xs-12">
            {{securitySetting.currentSecuritySettings[items[0][4]].validationErrorMessage}}
        </div>
    </li>
</ul>

使用此 html 代码，我的表单会适当地对表单上的错误输入数据做出反应： enter image description here