Angular -- Reactive Forms

Question

I'm creating a form with input fields. There are some default inputs fields values that come from a REST API.

Here is my template :

<form [formGroup]="form" (ngSubmit)="action()">
    <input type="text" formControlName="name" [value]="fromApi(name)">
</form>

And my TS code :

 this.form = new FormGroup({name:new FormControl('')})

The client got his default value from the API. He can change that data in the input field.

There are two possibilities :

1) He does change the initial value coming from the API. In that cas when I console.log the FormGroup, I got the new value he entered, that's perfect !

2) He doesn't want to change the value from the API. And that's my problem : in that case, the value for the input name is '' (the value from FormControl). And I would like to have the value from the API.

Is it possible ? Thanks

NOT use [value], take a look at stackoverflow.com/questions/48337798/… and use a function to fill the form — Eliseo
– Eliseo, Commented Jun 21, 2018 at 11:17

tlt · Accepted Answer · 2018-06-21 11:18:10Z

1

sure it is. fire your method to fetch from api in components ngOnInit hook and once you get data back (in subscribe, i guess) patchValue of the formControl.

answered Jun 21, 2018 at 11:18

tlt

15.5k11 gold badges54 silver badges104 bronze badges

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

Comments

Prachi · Accepted Answer · 2018-06-21 11:30:03Z

0

You can try this:

ngOnInit(){
     this.form = new FormGroup({name:new FormControl('')});
     this.fromApi();
}

fromApi(){
    //inside the subscribe method of the api called
    let valueFromAPI = 'Example';
    this.form.controls.name.setValue(valueFromAPI);
}

or

this.fromApi('name');

fromApi(control){
    //inside the subscribe method of the api called
    let valueFromAPI = 'Example';
    this.form.controls[control].setValue(valueFromAPI);
}

edited Jun 21, 2018 at 11:30

answered Jun 21, 2018 at 11:17

Prachi

3,60421 silver badges38 bronze badges

5 Comments

AntonBoarf Over a year ago

Thanks. Your solution works but my example is pretty easy. My real form is really complex with plenty API calls from different URLs. I wish I could find a solution without any code !

Prachi Over a year ago

From whichever API you get the value, inside its subscribe function you can use the setValue method of your form.

Prachi Over a year ago

You can even make it dynamic. See the updated solution.

Eliseo Over a year ago

Normally you get from API an object and you want to reflect the data in your form. I don't understand use setValue, better give values when you create the FormControl

Prachi Over a year ago

In case of multiple API calls for fetching the values, you cannot wait for the response of all the APIs in a synchronous way and then create a form. And you have to manage the same for add and edit functionality.

Collectives™ on Stack Overflow

Angular -- Reactive Forms

2 Answers 2

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related