Angular Reactive Form - Multiple parsing errors when trying to implement multiple step form

Question

I am trying to implement a multi-step Angular Reactive Form in my project. I am using Angular 19. I sought consultation from a tutorial that was written in Angular 8 though.

I am getting several parse errors. I have created a Stackblitz pen to simulate my project scenario as closely as possible. Feel free to work and edit my stackblitz.

This is the link: https://stackblitz.com/edit/stackblitz-starters-grjgagz8

If you visit the multi-step-form.component.ts under app -> components -> multi-step-form, you will see that there are errors on lines 62, 64, and 91.

If you hover over the red squibbly on the mentioned lines it shows the errors. I tried a number of things like explicitly mentioning the datatypes, but the errors still persist.

Can you help me get that StackBlitz working and display the multi-step form?

*Please study the code I used in my StackBlitz in totality so that you can understand the approach I tried to adopt. Inside the constants folder of my project structure, I have defined the JSON array for forming the steps of my multi-step form.

hi @JamesP did you see the stackblitz I posted? What exactly are you asking to update? — Prabir Choudhury
– Prabir Choudhury, Commented Dec 22, 2024 at 18:57
You say the tutorial uses old Angular version is 8 so just use above link to update it to v19 and it will work better in your project? — James P
– James P, Commented Dec 22, 2024 at 19:03
hi @JamesP the tutorial I spoke of, is a write-up. Written article. If you want, I can post the link here. — Prabir Choudhury
– Prabir Choudhury, Commented Dec 22, 2024 at 19:05

Yong Shun · Accepted Answer · 2024-12-23 02:49:30Z

1

Aside from some issues in your original StackBlitz link such as the incorrect component file name for RecipeMultiStepComponent, the selector name for AppComponent

For errors in Lines 62 & 64:

You can resolve this by specifying the validation based on the validator. From my demo below, I added the validations for minLength, maxLength, etc.

getValidators(formField: any): Validators {
  const fieldValidators: any = Object.keys(formField.validations).map(
    (validator) => {
      if (validator === 'required') {
        return Validators[validator];
      } else if (validator === 'minlength') {
        return Validators.minLength(formField.validations[validator]);
      } else if (validator === 'maxlength') {
        return Validators.maxLength(formField.validations[validator]);
      } else {
        // Validation Not supported
        return null;
      }
    }
  );

  return fieldValidators;
}

For the error in Line 91:

You can perform the null checking for masterForm with this.masterForm && this.masterForm[formIndex]

getValidationMessage(formIndex: any, formFieldName: string): string {
  const formErrors = (this.masterForm && this.masterForm[formIndex])?.get(
    formFieldName
  )?.errors;
  const errorMessages =
    this.currentFormContent[formIndex][formFieldName].errors;
  const validationError =
    formErrors && errorMessages[Object.keys(formErrors)[0]];

  return validationError;
}

Demo @ StackBlitz

answered Dec 23, 2024 at 2:49

Yong Shun

54.5k6 gold badges38 silver badges66 bronze badges

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

1 Comment

Prabir Choudhury Dec 23, 2024 at 9:25

hi @YongShun, thanks for replying. From your code, I can see for getValidators, you added else if blocks for other types of validation rules also. That removed the error. And for getValidationMessage you applied null checking by adding a '?' to the masterForm[formIndex] object. That's doing the trick! Thanks a bunch Yong,

Collectives™ on Stack Overflow

Angular Reactive Form - Multiple parsing errors when trying to implement multiple step form

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related