Angular4 forms - formGroup setValue to model with extra fields

You can update parts of your form with the method patchValue instead of setValue.

this.yourForm.patchValue({     yourFieldToUpdate: yourValue});

Angular is built in such a way to keep the form model and data model separate.

From the documentation:

In keeping with the reactive paradigm, the component preserves the immutability of the data model, treating it as a pure source of original values. Rather than update the data model directly, the component extracts user changes and forwards them to an external component or service, which does something with them (such as saving them) and returns a new data model to the component that reflects the updated model state.

But if you want to bind to a data model inside of a form, you can set ngModelOptions standalone to true

standalone: Defaults to false. If this is set to true, the ngModel will not register itself with its parent form, and will act as if it's not in the form. This can be handy if you have form meta-controls, a.k.a. form elements nested in the tag that control the display of the form, but don't contain form data.

Stack Blitz Example

In this example, the model has 3 fields, 2 of which can be edited on the form.

model.ts

export class Model {  fieldOne: string;  fieldTwo: string;  fieldThree: string;  constructor(fieldOne: string, fieldTwo: string, fieldThree: string)  {    this.fieldOne = fieldOne;    this.fieldTwo = fieldTwo;    this.fieldThree = fieldThree;  }}

app.component.ts

import {Component, OnInit} from '@angular/core';import {AbstractControl, FormBuilder, FormGroup} from '@angular/forms';import {Model} from './model';@Component({  selector: 'my-app',  templateUrl: './app.component.html',  styleUrls: [ './app.component.css' ]})export class AppComponent implements OnInit {  private _form  private _model: Model;  get form(): FormGroup {    return this._form;  }  get model(): Model {    return this._model;  }  set model(model: Model) {    this._model = model;  }  constructor(private formBuilder: FormBuilder) {}  ngOnInit() {    this.model = this.newModel();    this.createForm();  }  private newModel(): Model {    return new Model('fieldOne', 'fieldTwo', 'fieldThree');  }  private createForm() {    this._form = this.formBuilder.group({    });  }}

app.component.html

As the form values change, the actual data model is updated and only editable fields have been exposed to change via the form.

<form [formGroup]="form">  <div>    <label for="fieldOne">Field One</label>    <input      id="fieldOne"      type="text"      [(ngModel)]="model.fieldOne"      [ngModelOptions]="{ standalone: true }">  </div>  <div>    <label for="fieldTwo">Field Two</label>    <input      id="fieldTwo"      type="text"      [(ngModel)]="model.fieldTwo"      [ngModelOptions]="{ standalone: true }">  </div></form><h3>Model</h3><pre>{{ model | json }}</pre>

What about binding two ways to ONLY the controls whose fields (in Model) you want to update and setting values to the rest using angular double curly expressions

Eg.

<input type="checkbox" [(NgModel)]="model.FieldOne"><input type="text" name="fieldone" [(NgModel)]="model.FieldOne"><input type="text" name="fieldtwo"[(NgModel)]="model.FieldTwo"><input type="text" name="ignore1" value ="{{model.Ignore1}}"><input type="hidden" name="ignore2" value ="{{model.Ignore2}}">