CODEWITHSUNDEEP
angulartypescript
Kumara
Kumara

Reputation: 528

angular form submit and after reset the form values

I am using below angular form. I need to reset my text field after form submition.

        <form #addcheckinform="ngForm" novalidate (ngSubmit)="addcheckinform.form.valid && saveScheduleCheckin(this.checkin)">
        
          <div class="form-group row">
            <label for="email5" class="col-sm-3 col-md-3 col-form-label">Contact
              No.</label>
            <div class="col-sm-9 col-md-9">
              <input type="text" name="contactno" #contactno="ngModel" class="form-control" required
                     [ngClass]="{'is-invalid':addcheckinform.submitted && contactno.invalid}" placeholder="Contact No." [(ngModel)]="checkin.contactno" />
              </div>
            </div>
          <button type="submit" class="btn btn-action btn-flat float-right"
                  [disabled]="!addcheckinform.form.valid">
              <i class="fas fa-paper-plane"></i> <span> Submit</span>
          </button>
        </form>

This is some code about my component.ts file

@ViewChild(NgForm) addcheckinform: NgForm;

saveScheduleCheckin(a){
    this.resetForm();
}

resetForm() {
    this.addcheckinform.reset();
}

when console logged this.addcheckinform, it's said undefined. How do i reset my form correctly.

Upvotes: 1

Views: 62

Answers (2)

batman007
batman007

Reputation: 1

Remove ViewChild,can make it simple as below this worked for me You can try this: Html:

<span (click)="onSubmit(addcheckinform)"> Submit</span>

In component.ts:

onSubmit(form:NgForm){

form.submitted=true;
form.reset();

}

Upvotes: 0

Rey
Rey

Reputation: 51

@ViewChild('addcheckinform') addcheckinform: NgForm;

Upvotes: 1

Related Questions