Change data in form control Angular

Question

I have an Angular v6 application. Here's my FormGroup

stepperForm: FormGroup;

constructor() {
  this.stepperForm = new FormGroup({
    apps: new FormControl(''),
    params: new FormControl('', SpecifyDetailsStepComponent.isValidJsonValidatorFn()),
  });
}

I have a method where I want to change the data in formControl params :

const stringData = JSON.stringify(jsonData);
this.stepperForm.setValue({
  apps: new FormControl(''),
  params: new FormControl(stringData, SpecifyDetailsStepComponent.isValidJsonValidatorFn()),
});

I have no error in the console but the data isn't changing at all.

Edit:

I need to be able to use the validator. Thank you

Answer 1

You may simply do :

this.stepperForm.get('params').setValue(stringData);

And then to take immediate effect for validators.

this.stepperForm.get("params").updateValueAndValidity();

Answer 2

Do via Form: this.stepperForm.get('FormControlName').setValue('WhateverData'); Do via FormControl: this.formControl.setValue('whateverData');

Answer 3

You can set multiple values at once using below one

this.stepperForm.setValue({
    apps: 'newValue',
    params: 'newValue',
});