Changing the status of FormControl in angular

Angular form module FormControl allows to change the status by using the methods. When status of the control gets change the validity and value of the parent control is also calculated and updated.

Note: If control status is changed then FormGroup status is also changed by using control StatusChange event. It allows to update the status of FormGroup similarly to FormControl.

1. markAsTouched()2. markAllAsTouched()3. markAsDirty()4. markAsPristine()5. markAsPending()6. disable()7. enable()

markAsTouched()

The markAsTouched() method marks the control as touched. It does not matter whether control got focus previously or not but it update the status touched to true.

Syntax

 1 markAsTouched(opts: { onlySelf?: boolean; } = {}): void

onlySelf : The default value is false, if set to true then only this control is marked as touched and If false it marks all its direct ancestors as touched.

Example

 1 /* without options */
 2 this.loginForm.get("username").markAsTouched()
 3 /* with options */
 4 this.loginForm.get("username").markAsTouched({ onlySelf:true; })

markAllAsTouched()

The markAllAsTouched() method marks the control and its descendant controls as touched.

Syntax

 1 markAllAsTouched(): void

Example

 1 this.loginForm.get("username").markAllAsTouched()

markAsUntouched()

The markAsUntouched() method marks the control as untouched. Even though the FormControl got the focus.

Syntax

 1 markAsUntouched(opts: { onlySelf?: boolean; } = {}): void

onlySelf : The default value is false, if set to true then only this control is marked as touched and If false it marks all its direct ancestors as touched.

Example

 1 /* without options */
 2 this.loginForm.get("username").markAsUntouched()
 3 /* with options */
 4 this.loginForm.get("username").markAsUntouched({ onlySelf:true; })

markAsDirty()

The markAsDirty() method marks the control as dirty. A control becomes also dirty when the control’s value is changed through the UI.

Syntax

 1 markAsDirty(opts: { onlySelf?: boolean; } = {}): void

onlySelf : The default value is false, if set to true then only this control is marked as touched and If false it marks all its direct ancestors as touched.

Example

 1 /* without options */
 2 this.loginForm.get("username").markAsDirty()
 3 /* with options */
 4 this.loginForm.get("username").markAsDirty({ onlySelf:true; })

markAsPristine()

The markAsPristine() method makes the control pristine that is user not yet changed the value in the UI.

Syntax

 1 markAsPristine(opts: { onlySelf?: boolean; } = {}): void

onlySelf : The default value is false, if set to true then only this control is marked as touched and If false it marks all its direct ancestors as touched.

Example

 1 /* without options */
 2 this.loginForm.get("username").markAsPristine()
 3 /* with options */
 4 this.loginForm.get("username").markAsPristine({ onlySelf:true; })

markAsPending()

The markAsPending() method marks the control status as pending, the value of control is changed but it not yet validated against the specified validators.

Syntax

 1 markAsPending(opts: { onlySelf?: boolean; emitEvent?: boolean; } = {}): void

onlySelf : The default value is false, if set to true then only this control is marked as touched and If false it marks all its direct ancestors as touched.

emitEvent : It allows to disable this events by setting the false value to the emitEvent.

Example

 1 /* without options */
 2 this.loginForm.get("username").markAsPending()
 3 /* with options */
 4 this.loginForm.get("username").markAsPending({ onlySelf:true; emitEvent: false; })

disable()

The disable() method disable the control, which mean the control is exempt from validation checks and excluded from the aggregate value of any parent.

Syntax

 1 disable(opts: { onlySelf?: boolean; emitEvent?: boolean; } = {}): void

onlySelf : The default value is false, if set to true then only this control is marked as touched and If false it marks all its direct ancestors as touched.

emitEvent : It allows to disable this events by setting the false value to the emitEvent.

Example

 1 /* without options */
 2 this.loginForm.get("username").disable()
 3 /* with options */
 4 this.loginForm.get("username").disable({ onlySelf:true; emitEvent: false; })

enable()

The enable() method enable the control, which mean the control is not exempt from validation checks and excluded from the aggregate value of any parent.

Syntax

 1 enable(opts: { onlySelf?: boolean; emitEvent?: boolean; } = {}): void

onlySelf : The default value is false, if set to true then only this control is marked as touched and If false it marks all its direct ancestors as touched.

emitEvent : It allows to disable this events by setting the false value to the emitEvent.

Example

 1 /* without options */
 2 this.loginForm.get("username").enable()
 3 /* with options */
 4 this.loginForm.get("username").enable({ onlySelf:true; emitEvent: false; })