Angular2 bind data only if form is submitted

How to bind data only if form is submitted in Angular2

This can be down with angular2 form handing with data-driven approach (User Angular FormBuilder).

Template File

<form [ngFormModel]='myForm' (ngSubmit)="onSubmit()">
  <input type="text" [ngFormControl]="myForm.controls['userName']" />
  <button type="submit">Submit</button>
  <button>Cancel</button>
</form>
<br>userName : {{originalUserName}}

Angular Component Class

export class AppComponent {
  myForm:ControlGroup;
  originalUserName:string;

  constructor(private _formBuilder:FormBuilder) {
    this.originalUserName = 'abc';
    this.myForm = _formBuilder.group({
      userName: [this.originalUserName]
    });
  }

  onSubmit(form) {
    this.originalUserName = this.myForm.controls['userName'].value;
  }
}

GitHub Example Source

Comments