How To Change Input Value And Make It Valid After Button Clicked In Angular

I have an input field and add button in a component. Button is disabled at first, when user enters valid format url, button becomes active, then button add this domain to db, refre

Solution 1:

How about

@ViewChild(addDomainForm) formDirective: FormGroupDirective;

addClicked() {
 this.formDirective.resetForm();
}

It'll reset your form as you are checking if the form is dirty

Solution 2:

You are making the ngModel domainName as null so it throws error. Change it like this.domainName = ''

Solution 3:

Along with setting the ngModel to it's original value, empty or null. You should also set your form asPristine.

If you are using Template-Driven forms and you have something like this in your component: @ViewChild('myForm') myform: any;

You can use the markAsPristine() function on the form property of your form. So it would be this.myform.form.markAsPristine().

Solution 4:

In your HTML you use url.invalid && url.touchedto add the invalid red class, perhaps try this instead:

[class.is-invalid]="url.invalid && url.dirty"

This way it's not flagged as invalid until the value as actually changed.