Блог

Я работаю с формой, управляемой шаблоном проверки шаблона Angular, для моего проекта Angular 9. У меня есть список свойств, которые мне нужно проверить в моей форме, поэтому я пытаюсь поместить этот 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» или, может быть, мне нужно изменить что-то еще, чтобы иметь возможность видеть ошибку проверки моей формы?

Пожалуйста, дайте мне знать, если мне нужно предоставить более подробную информацию

Первое, что я бы сделал, это дважды проверить, передается ли 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}}" , я не уверен)

звучит как метод проб и ошибок, отправляйте обратно, где вы в конечном итоге!

Я действительно нашел обходной путь, просто избавившись от цикла:

 <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-кода моя форма соответствующим образом реагирует на неправильные входные данные в форме:
введите описание изображения здесь