Initializing Form Controls

Instantiate a FormControl, with an initial value.

const control = new FormControl('some value');console.log(control.value);     // 'some value'

The following example initializes the control with a form state object. The value and disabled keys are required in this case.

const control = new FormControl({ value: 'n/a', disabled: true });console.log(control.value);     // 'n/a'console.log(control.status);    // 'DISABLED'

The following example initializes the control with a synchronous validator.

const control = new FormControl('', Validators.required);console.log(control.value);      // ''console.log(control.status);     // 'INVALID'

The following example initializes the control using an options object.

const control = new FormControl('', {   validators: Validators.required,   asyncValidators: myAsyncValidator});

The single type argument

FormControl accepts a generic argument, which describes the type of its value. In most cases, this argument will be inferred.

If you are initializing the control to null, or you otherwise wish to provide a wider type, you may specify the argument explicitly:

let fc = new FormControl<string|null>(null);fc.setValue('foo');

You might notice that null is always added to the type of the control. This is because the control will become null if you call reset. You can change this behavior by setting {nonNullable: true}.

Configure the control to update on a blur event

Set the updateOn option to 'blur' to update on the blur event.

const control = new FormControl('', { updateOn: 'blur' });

Configure the control to update on a submit event

Set the updateOn option to 'submit' to update on a submit event.

const control = new FormControl('', { updateOn: 'submit' });

Reset the control back to a specific value

You reset to a specific form state by passing through a standalone value or a form state object that contains both a value and a disabled state (these are the only two properties that cannot be calculated).

const control = new FormControl('Nancy');console.log(control.value); // 'Nancy'control.reset('Drew');console.log(control.value); // 'Drew'

Reset the control to its initial value

If you wish to always reset the control to its initial value (instead of null), you can pass the nonNullable option:

const control = new FormControl('Nancy', {nonNullable: true});console.log(control.value); // 'Nancy'control.reset();console.log(control.value); // 'Nancy'

Reset the control back to an initial value and disabled

const control = new FormControl('Nancy');console.log(control.value); // 'Nancy'console.log(control.status); // 'VALID'control.reset({ value: 'Drew', disabled: true });console.log(control.value); // 'Drew'console.log(control.status); // 'DISABLED'