Angular 6: Reactive Form's updateOn: 'submit' is not updating value after submitting

Question

I'm testing with Angular reactive form validation with updateOn parameter but it seems that even the simplest form is not working correctly when I pass updateOn: 'submit' (other values are working fine).

app.component.html:

<form novalidate (submit)="onSubmit()">
  <input type="text" [formControl]="form.get('test')">

  Value: {{ form.get('test').value }}

  <button type="submit">SUBMIT</button>
</form>

app.component.ts:

import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  public form = new FormGroup({
    test: new FormControl('', { validators: [Validators.required], updateOn: 'submit'}),
  });

  public onSubmit(): void {
    console.log('Submitted:');
    console.log(this.form.value); // Got: Object { test: "" }
  }
}

Full and working code: https://codesandbox.io/s/67pmd

What I'm getting after clicking a button is empty field value (both in html and in console). But if I change/leave updateOn to default, then it's working fine. From what I see, value and validations should be updated only after submitting the form, but it seems that it doesn't? What I am missing here?

Answer 1

You seem to have forgotten to bind your formGroup to your template. The form FormGroup is bound to the <form> element with the formGroup directive. (Source: docs)

<form [formGroup]="form" novalidate (submit)="onSubmit()">
    <input type="text" [formControl]="form.get('test')">
    Value: {{ form.get('test').value }}
    <button type="submit">SUBMIT</button>
</form>

Edit: The reason why other values like blur and change are working fine with updateOn is beacause blur and change are events fired based on your input while submit is an event that's fired when the form itself is submitted. To know when the form is submitted, Angular needs to know what the formGroup is.