formControl validation message ( angular reactive forms)

Question

I am trying to make a object which has all the error message and upon getting error in the form with show the message directly, don't have to make any changes in template.

But I am not able to access they validationMessage key using the forEach() loop on the form which I created.

 // This object contains all the validation messages for this form
  validationMessages = {
    'fullName': {
      'required': 'Full Name is required.',
      'minlength': 'Full Name must be greater than 2 characters.',
      'maxlength': 'Full Name must be less than 10 characters.',
    },
    'email': {
      'required': 'Email is required.',
    },
    'skillName': {
      'required': 'Skill Name is required.',
    },
    'experienceInYears': {
      'required': 'Experience is required.',
    },
    'proficiency': {
      'required': 'Proficiency is required.',
    },
  };

this above object is validation error message

this.employeeForm = this.fb.group({
      'fullName': [
        '',
        [
          Validators.required,
          Validators.maxLength(15),
          Validators.minLength(5),
        ],
      ],
      'email': ['', [Validators.required, Validators.email]],
      'skills': this.fb.group({
        'skillName': ['', [Validators.required]],
        'experienceInYears': ['', [Validators.required]],
        'proficiency': ['', [Validators.required]],
      }),
    });

above is how my form constructed

 logValidationErrors(group: FormGroup): void {
    Object.keys(group.controls).forEach((key: string) => {
      const abstractControl = group.controls?.[key];
      if (abstractControl instanceof FormGroup) {
        this.logValidationErrors(abstractControl);
      } else {
        if (abstractControl && !abstractControl.valid) {
          const message = this.validationMessages[key] <-- upon trying to assign the message I am getting error 
        }
      }
    });

how to achieve the above as task? I changed the key type to any but also no success. thanks in advance

here is the error (parameter) key: string Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ fullName: { required: string; minlength: string; maxlength: string; }; email: { required: string; }; skillName: { required: string; }; experienceInYears: { required: string; }; proficiency: { required: string; }; }'. — cha1nsaw
– cha1nsaw, Commented Oct 12, 2022 at 18:26

cha1nsaw · Accepted Answer · 2022-10-12 18:41:07Z

1

https://csharp-video-tutorials.blogspot.com/2018/10/move-validation-messages-to-component.html

above problem can be resolved by defining the validationMessage type as validationMessage:{[key:string]:any} seems to resolve the issue

answered Oct 12, 2022 at 18:41

cha1nsaw

672 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

formControl validation message ( angular reactive forms)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related