CODEWITHSUNDEEP
angularformsangular-material
user2010955
user2010955

Reputation: 4011

Prevent a new formControl to be invalid after a mat-stepper is complete

I'm using mat-stepper component of Angular Material, as a multi-form steps.

I'd like to prevent the following behaviour:

  1. Step 1 is valid
  2. User moves on step 2
  3. User goes back on step 1
  4. User adds a control (e.g adding a formArray item)
  5. The new item is already invalid (red) even if it's untouched/pristine.

Why is the new item already invalid? I've noticed it has already a mat-form-field-invalid class...

Here is the StackBlitz

Any hints? Thanks!

Upvotes: 1

Views: 1530

Answers (1)

Vincent AUDIBERT
Vincent AUDIBERT

Reputation: 356

What this answer says is that validation is running on the full step form whenever a step has been "interacted".

So a workaround for your case would be to add the control without any validator (nor required attribute in the template), and to set them whenever the user goes to another step (with the MatStepper selectionChange output).

Upvotes: 0

Related Questions