How to clear inputs (reset forms) after submitting

Question

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>

Answer 1

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.