Angular Pattern Validation template driven form get validated elements from ngFor loop

Question

I am working with Angular Pattern Validation template driven form for my Angular 9 project. I have the list of properties which I need to validate in my form, so I am trying to put that html code in *ngFor loop to reduce my code:

<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>

and my controller looks like:

@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: {}
    };
    
    ...
}

When I run this code my browser don't return any errors and my form looks like this:

but unfortunately my validate error of a pattern code doesn't work.

Anybody have an idea what can I put to my input's name, ref-data="ngModel" or maybe I need to change something else to be able to see validation error of my form?

Please let me know if I need to provide more details

iamaword iamaword · Accepted Answer · 2020-08-28T03:55:05

The first thing I would do is double check whether the ngIf is passing:

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

from the looks of it you are trying to refernce 'data.errors' which isn't a thing. in this context data is a string out of an array:

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'],

to access elements in a form you usually do something like #name="ngModel" and then somewhere else say *ngIf="name.errors".

in your case it might still work since everything in an ngfor is it's own template, but it might take some funkyness (maybe you can do something like #name{{i}}="{{data}}", I'm not sure)

sounds like a trial and error thing, post back where you end up!

Angular Pattern Validation template driven form get validated elements from ngFor loop

2 Answers