CODEWITHSUNDEEP
angularangular-reactive-forms
M. Sgarbossa
M. Sgarbossa

Reputation: 115

patchValue to set value and disable the field

I'm pushing a FormArray with some values, and i need to dynamically set disabled property in certain fields after i've loaded a list. My question is: IS there a way to set the value and set the disabled property using only patchValue?

I've tried something like this.rowArray.controls[index].patchvalue({format: "NUMBER", disabled:true}) but it doesn't seem to work.

  this.rowList.forEach((el, index) => {
              this.rowArray.push(
                this.fb.group(
                  {
                    name: new FormControl(el.name, [
                      Validators.required,
                      Validators.maxLength(30),
                      Validators.pattern(this.BAN_SPECIAL_BUT_UNDERSCORE)
                    ]),
                    source: new FormControl(el.source, Validators.required)
.....

and after that 

    if (this.rowArray.controls[index].get("source").value === "CSV") {
                this.rowArray.controls[index].patchValue({
                  format: "NUMBER",
                  disabled: true
                });
              }

rowList is my matrix that comes from backEnd.

Upvotes: 6

Views: 23080

Answers (2)

DeTodo ZyK
DeTodo ZyK

Reputation: 11

Some examples can be found in the documentation.

Use the same way to disable controls when initializing them.

this.form = new FormGroup({
     format: new FormControl(),
     otherControl: new FormControl({ value: "CustomValue", disabled: true }) //"otherControl" initializes disabled
})

this.form.patchValue({
   format: { value: "CustomValue", disabled: true },  //Disable control by pathValue      
})

Same applies when resetting.

form.reset({
  format: {value: 'customValue', disabled: true}, //Disable control by reset
  otherControl: 'last'
});

Upvotes: 1

wentjun
wentjun

Reputation: 42556

You can dynamically set your FormControl to be disabled by using the disable() method.

As stated on the documentation, patchValue() will not work, as it is only used for setting the values (and not the state) of your FormControl.

Patches the value of the FormGroup. It accepts an object with control names as keys, and does its best to match the values to the correct controls in the group.

this.rowArray.controls[index].get('source').disable();

Upvotes: 14

Related Questions