How to set dynamic value to formControl in angular 7

Question

I have a drag-and-drop formBuilder we can able to create form using drag and drop so now i am facing problem i have hidden field in html which is TempleteJson.

Here is html code

<form [formGroup]="userForm" (ngSubmit)="onSubmit()">
   <div class="form-group">
     <label>Form Name:</label>
     <input type="text" class="form-group" formControlName="TemplateName" />
   </div>
   <div class="form-group">
     <input type="hidden" class="form-group" formControlName="TemplateJson" />
   </div>
   <div class="form-group">
     <label>CreatedOn:</label>
     <input type="date" class="form-group" formControlName="CreatedOn" />
   </div>
   <button type="submit" class="btn btn-primary">Submit</button>
</form>

Here is component.ts file

formBuilder: any;
formData: any;
data: any;

ngOnInit() {
    var id = this.route.snapshot.paramMap.get('id');
    
    this.dataService.GetFormById(+id).subscribe(response => {
        this.data = response['TemplateJson'];
        this.generateForm();
    },
        err => {
            this.generateForm();
    });
    
    initJq();
}

userForm = new FormGroup({
    TemplateName: new FormControl(),
    TemplateJson: new FormControl(),
    CreatedOn: new FormControl(),
});

onSubmit() {
    console.log(this.userForm.value);
    this.dataService.addFormTemplate(this.userForm.value);
}

Now in this.data i have json and that json i want to set in TemplateJson FormControl so how can i do it .

Thank you!

This is some of the basics of the reactive-forms. You can easily find answer on https://angular.io/guide/reactive-forms — Sachin Gupta, Apr 12 '19 at 05:34
@Robert issue is not in generateForm() funtion and this function i didn't mention here as i think it didn't make sense to question — Ronak Dumaniya, Apr 12 '19 at 05:37
this.userForm.get('TemplateJson').setValue(this.data.TemplateJson) — raw_hitt, May 07 '22 at 10:19

Prashant Pimpale · Accepted Answer · 2021-04-22T02:19:54.740

31

You can use SetValue method of FormControl:

setValue():

Sets a new value for the form control.

In your case it will be like:

this.userForm.controls['TemplateJson'].setValue(this.data.TemplateJson);

Stackblitz_Demo

edited Apr 22 '21 at 02:19

answered Apr 12 '19 at 05:40

Prashant Pimpale

10,349
9
44
84

wentjun · Answer 2 · 2020-05-03T04:37:21.243

9

I have answered a similar question here which have a better explanation with examples.

Setting or Updating of Reactive Forms Form Control values can be done using both patchValue and setValue. However, it might be better to use patchValue in some instances.

patchValue does not require all controls to be specified within the parameters in order to update/set the value of your Form Controls. On the other hand, setValue requires all Form Control values to be filled in, and it will return an error if any of your controls are not specified within the parameter.

In this scenario, we will use patchValue to update the values in userForm.

If the properties in TemplateJson is the same as the FormControlNames, you can simple do it this way:

this.userForm.patchValue(this.data)

If the names are different,

this.userForm.patchValue({
  property1: this.data.bbb
  property2: this.data.aaa
  .
  .
})

edited May 03 '20 at 04:37

answered Apr 12 '19 at 05:41

wentjun

40,384
10
95
107

In this.data i have only json which i want to set TempleteJson and other value coming from the form . – Ronak Dumaniya Apr 12 '19 at 05:59
Ok, wait. When would you want the values to be assigned? – wentjun Apr 12 '19 at 06:06
Yes and this.data is might be asyc so please check on that manner – Ronak Dumaniya Apr 12 '19 at 06:09
But isn't the form generated within the subscribe? – wentjun Apr 12 '19 at 06:21

bbrp · Answer 3 · 2021-01-18T09:17:21.193

I had a similar issue where I tried to use 'setValues' with 'this.class.attribute' after my subscribe and I had a "cannot read value of undefined" error. It turned out you have to use the setValue inside the subscribe.

 //My Get method
 getX(): void {
    const id = +this._route
    .snapshot.paramMap.get('id');
    this._xService.getX(id)
    
    //Now my subscribe
    .subscribe(x =>  {
      this.x = x;

        //And my setValue inside my subscribe
        this.nameOfYourForm.setValue({
          formAttribute1: this.x.Attribute1,
          //The x attribute should match the name in the API / database and not the name in your class
       })
    })
  }

Hope this help someone.

How to set dynamic value to formControl in angular 7

3 Answers3