Custom input doesn't remove ng-valid, ng-dirty, ng-touched on form reset.

[tribal quail]

I have this code... so basically form in which we enter the key and value. On submitting it adds this {value, key} to the array and we reset the form. So we can add another item to the array. Resetting the form resets the values, but the classes ng-valid, ng-dirty, etc. - stay on the input, and don't get removed, therefore the form has still green border. I have also tried mark as pristine on controls etc.

    addLabel(): void {
        const { key, value } = this.labelFormGroup.value;
        this.labelList.push({ key, value });
        this.labelListChange.emit(this.labelList);
        this.labelFormGroup.reset({ key: '', value: '' });
        this.formDirective.resetForm({ key: '', value: '' });

        console.log(this.labelFormGroup.controls.key);
    }

[real tinsel]

A minimal Stackblitz repro would help, but as a guess, try adding updateValueAndValidity() call after resetting form.

[tribal quail]

I have found the problem.

The problem was that I had ngmodel and reactive forms on input.

And I have been reseting reactive one, and not ngmodel.

Thats why classes stayed on.