Within the component.ts file, I am fetching form field values and converting them into a JSON array to create a FormGroup control. This process is functioning perfectly.
getJsonForm(){
let base_url = 'example.org'
let getform_query = '/Base/formfieldsgenerator_get';
let getform_endpoint = base_url.concat(getform_query);
this.AllFormData = [];
this.http.get('getform_endpoint'.'?tabpgrpid='+this.tabpgrpid+'&tabgrpname='+this.tabgrpname+'&usertabgrpname='+this.usertabgrpname+'&moduleid='+this.moduleid+'&templateid='+this.templateid+'&all_mod_data='+this.all_mod_data,{headers: this.headers}).subscribe(
res => {
this.AllFormData = res;
// This array is utilized for iteration in the HTML section
this.newfdata[element] = [];
this.newfdata[element]['properties'] = [];
Object.keys(res['com'][element]['schema']['properties']).forEach(inputKey => {
this.newfdata[element]['properties'].push(res['com'][element]['schema']['properties'][inputKey]);
});
// This section creates form controls and form groups
this.objectProps = Object.keys(res['com'][element]['schema']['properties']).map(prop => {
return Object.assign({}, { key: prop} , res['com'][element]['schema']['properties'][prop]);
});
for(let prop of Object.keys(res['com'][element]['schema']['properties'])) {
formGroup[prop] = new FormControl(res['com'][element]['schema']['properties'][prop].value || '', this.mapValidators(res['com'][element]['schema']['properties'][prop].validation));
}
});
this.form = new FormGroup(formGroup);
});
}
In the components.html file, I am utilizing the array to generate a dynamic form. This functionality is also working properly.
<form (ngSubmit)="custom_submit(form.value)" [formGroup]="form" >
<div *ngFor="let input1 of newfdata[tabname].properties">
<ng-container *ngIf="input1.type=='string'">
<div>
<mat-form-field>
<input matInput [formControlName]="input1.field_name" [id]="input1.field_name" type="text" placeholder="{{input1.title}}">
</mat-form-field>
</div>
</ng-container>
</div>
</form>
To change the value of a form field based on the changes in other fields, I attempted to subscribe to the valueChanges emitter of the form group variable without success.
I tried implementing this in ngOnit, but it did not produce any results in the console.
ngOnit(){
this.form.valueChanges.subscribe(val => {
this.formattedMessage = 'My changed values are ${val}.';
console.log(this.formattedMessage);
});
}
Edit 1 :
Following a suggestion from Manzur Khan, I indicated the success of the form creation event by passing the value as true, and then used this in ngOnit to capture the onchange event :
this.form = new FormGroup(formGroup);
this.dataService.change_current_form_created("true");
And within ngOnit:
this.dataService.last_form_created_message.subscribe(data => {
if(data=="true") {
this.form.valueChanges.subscribe(val => {
this.formattedMessage = 'My changed values are ${val}.';
console.log(this.formattedMessage);
});
}
});
Now I am able to log the change event in the console, but have yet to find the resolution for ${val}.
Edit 2 :
Since the val is an object, I encountered difficulties resolving ${val}, so I simply did this:
this.form.valueChanges.subscribe(val => {
console.log('the changed value is',val);
});
This provides me with all the values of the given form groups. Further optimization is still required to specifically listen to certain form controls. Nonetheless, progress has been made. Gratitude to all involved.