At what event is validation in Angulyar tied?

Validation is not tied to any event. A validator is a normal function that returns ValidationErrors | null ValidationErrors | null , or in the case of an asynchronous validator Promise<ValidationErrors | null> | Observable<ValidationErrors | null> Promise<ValidationErrors | null> | Observable<ValidationErrors | null> Promise<ValidationErrors | null> | Observable<ValidationErrors | null> .

When you use the formControlName directive or formControl , a large number of directives are initialized under the hood, such as NgControlStatus , FormControlDirective , FormControlName and so on. Static metadata such as host are bound to these directives:

 host: { '(change)': 'onChange($event.target.value)', '(blur)': 'onTouched()' } 

The onChange function is called on the change event. onChange sets the current control value and calls the updateValueAndValidity method from the bottom up (the reactive forms are the tree). updateValueAndValidity in turn calls the _runValidator function (it _runValidator through the array of validators and calls them, where the argument passes the current control), the result of _runValidator assigned to the errors variable. After that, the _updateStatus function is _updateStatus , which changes the status of the control from valid to invalid and vice versa. After that, an event is generated via statusChanged: EventEmitter<void> up the tree stating that the control failed / passed validation and its status has changed, re-draw the form.

How to update the value from the outside:

 public form = new FormGroup({ name: new FormControl('Артур', { validators: [ Validators.required, Validators.minLength(4) ] }) }); public get name(): AbstractControl { return this.form.get('name') !; } 

In the template, you can use the name property:

 <button (click)="name.setValue(null)">Изменить имя</button> 

Getter is used to avoid duplication of code, so as not to write form.get('name') !.setValue(null) every time. Changing the value to null - the control and the form itself will become invalid:

 console.log(this.form.invalid === true); // true 

Similarly, the name property can be accessed in the component itself:

 @Component({ selector: ...., template: '<button (click)="changeNameValueToNull()">Изменить имя</button>' }) export class .... { public form = .... public get name .... public changeNameValueToNull(): void { this.name.setValue(null); } } 

To change the validity from outside Angular - directives listen to events, you need to manually trigger dispatch events:

 const input = document.querySelector('.some-input'); input.value = '1'; input.dispatchEvent(new Event('input')); 

In general, avoid this, this is the wrong approach.