CODEWITHSUNDEEP
angulartypescript
Mike Landers
Mike Landers

Reputation: 450

How to clear inputs (reset forms) after submitting

I am starting to program angular and I do not understand how I can clear the inputs after clicking a submit button.

Can anyone explain to me a simple procedure of being able to clear / reset the inputs / forms after clicking the submit button? Is there a way to put any validator in one of the fields?

I've seen some topics on the subject, but could not understand the logic.

DEMO

HTML

<form>
  <div class="form-group">
    <label for="exampleFormControlInput1">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1">
  </div>
   <div class="form-group">
    <label>Adress</label>
    <input type="text" class="form-control" id="exampleFormControlInput1">
  </div>
   <div class="form-group">
    <label>Name</label>
    <input type="text" class="form-control" id="exampleFormControlInput1">
  </div>
  <div class="form-group">
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
  <button type="submit" (click)="clearforms()">SUBMIT</button>
</form>

Upvotes: 0

Views: 55

Answers (1)

Andrei Gătej
Andrei Gătej

Reputation: 11979

I'd strongly recommend following the first commenter's advice.

Here is a working example which makes use of Template Driven Forms, which basically represents a declarative way to build your form tree.

If you're dealing with more dynamic stuff, you should consider using Reactive Forms, it will give you much more control on the situation.

You can also provide validators. You can do this either through some directives, or, especially when using Reactive Forms, through the Validators object.

For instance, here's how you'd use an email validator as a directive:

<input ngModel name="email" email>

Here is a file that contains all the validators which are available as directives.

Upvotes: 1

Related Questions