Angular 2: ReactiveForm Updating Model

Question

I have a reactive form which I would like to directly populate my model.

form.component.html

<form [formGroup]="personForm" (ngSubmit)="savePerson()">
    <md-card class="app-input-section">
        <md-input formControlName="personName" placeholder="Person Name"></md-input>
        ... many more fields
        <button md-raised-button color="primary">Save</button>
    </md-card>
</form>

form.component.ts

@Component({
    selector: 'person',
    template: 'form.component.html'
})

export class FormComponent implements OnInit {

    person: Person;
    formBuilder: FormBuilder;
    personForm: FormGroup;

    constructor(formBuilder: FormBuilder, personService: PersonService) {
        this.person = new Person();
        this.personForm = formBuilder.group({
            personName: [this.person.personName, Validators.required],
            ... many more properties for form
        });
    }

    ngOnInit() {
        console.log('ngOnInit() called');
    }

    savePerson() {
        this.person.personName = this.personForm.value.personName;
        ... many more properties set
        this.personService.savePersontoDB(this.person);
    }
}

In the savePerson() function I am having to copy the values from the personForm FormGroup to the Person object. For a handful of properties this is fine however if I have many properties this will be just another thing to manage. How can I simplify this code so that either:

the personForm values are automatically copied to the Person object as the form values change.
the personForm values are automatically copied to the Person object when the user presses the "save" button (which subsequently calls the save() function. By this, I mean not having to copy all of the individual form values to my model (Person) object.

What is the best way to make this happen? Is there some kind of helper I can use or is it simpler than this?

Many thanks

JT

Hendy Irawan · Accepted Answer · 2016-12-09 11:16:48Z

8

In my app, I have done this:

 this.selectedPhysical = <Physical>this.physicalForm.value;

this maps the fields in the form ui to the underlying object. So you could:

this.person = <Person>this.personForm.value;
this.personService.savePersontoDB(this.person);

edited Dec 9, 2016 at 11:16

Hendy Irawan

21.6k12 gold badges112 silver badges117 bronze badges

answered Sep 5, 2016 at 10:05

John Baird

2,6761 gold badge17 silver badges34 bronze badges

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

2 Comments

JT-Helsinki Over a year ago

This is exactly what I was after. Set up the form object and it just copies everything across to the object to be saved. Thanks very much.

ANewGuyInTown Over a year ago

Does not work for me. I have the exact same scenario. form.value has just the changed set of properties

Collectives™ on Stack Overflow

Angular 2: ReactiveForm Updating Model

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related