Update Validators in Angular Reactive Forms

Question

I have a problem updating the values of car_description. Initially, the car_description is set to required. But if value.car_description isn't null then I need to patch its value from the onSelectPlateNo(). and it should be disabled so you can't change it.

My problem now is that I can't submit it, since it is still required even though the values are already set.

this.serviceTransactionForm = this.formBuilder.group({
    car_description: [null, Validators.required],
});



onSelectPlateNo(value) {
    if (value.car_description) {
      this.serviceTransactionForm.get('car_description').clearValidators();
      this.serviceTransactionForm.get('car_description').setValidators(null);
      this.serviceTransactionForm.get('car_description').updateValueAndValidity();
      this.serviceTransactionForm.get('car_description').disable();
      this.serviceTransactionForm.get('car_description').setValue(value.car_description);
    } else {
      this.serviceTransactionForm.get('car_description').enable();
    }
  }

Thomas Sablik · Accepted Answer · 2021-01-19 16:37:54Z

1

A formControl can either be

VALID
INVALID
DISABLED
PENDING

By

this.serviceTransactionForm.get('car_description').disable();

you're setting the status of this form field to DISABLED. The values of

this.serviceTransactionForm.get('car_description').valid

and

this.serviceTransactionForm.get('car_description').invalid

are both false.

Two possible solutions are:

Negate the check: Instead of

if (this.serviceTransactionForm.valid)

check for

if (!this.serviceTransactionForm.invalid)

Use readOnly instead of disabled in the HTML template

<input type="text" formControlName="car_description" [readonly]="car_description_read_only">

You can reduce your code to

this.serviceTransactionForm = this.formBuilder.group({
    car_description: [null, Validators.required],
});

car_description_read_only = false;

onSelectPlateNo(value) {
    if (value.car_description) {
      this.serviceTransactionForm.get('car_description').setValue(value.car_description);
      this.car_description_read_only = true;
    } else {
      this.serviceTransactionForm.get('car_description').enable();
    }
  }

edited Jan 19, 2021 at 16:37

answered Jan 19, 2021 at 16:28

Thomas Sablik

16.5k7 gold badges38 silver badges69 bronze badges

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

2 Comments

Joseph Over a year ago

I'm thinking of readOnly too but how can you set it to that?

Thomas Sablik Over a year ago

@Joseph I added an example for readonly. You need a variable for this

Zoubeir · Accepted Answer · 2021-01-19 16:35:39Z

0

You can use removeControl. Example in your case: this.serviceTransactionForm.removeControl('car_description')

answered Jan 19, 2021 at 16:35

Zoubeir

1093 bronze badges

1 Comment

Thomas Sablik Over a year ago

This causes that the user can change the value and get error messages in the log: stackblitz.com/edit/angular-ivy-ddvfsn?file=src/app/… Also OP wants to submit the whole form.

Collectives™ on Stack Overflow

Update Validators in Angular Reactive Forms

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related