CODEWITHSUNDEEP
htmlangular
joesan
joesan

Reputation: 15385

Angular 4 Reset Button Throws Error

I have the following form in my HTML element:

<form class="row" name="powerPlantSearchForm" (ngSubmit)="f.valid && searchPowerPlants()" #f="ngForm" novalidate>
          <div class="form-group col-xs-3" >
            <label for="powerPlantName">PowerPlant Name</label>
            <input type="text" class="form-control-small" [ngClass]="{ 'has-error': f.submitted && !powerPlantName.valid }" name="powerPlantName" [(ngModel)]="model.powerPlantName" #powerPlantName="ngModel" />
          </div>
          <div class="form-group col-xs-3" >
            <label for="powerPlantType">PowerPlant Type</label>
            <select class="hideLabel form-control" [(ngModel)]="model.powerPlantType" name="powerPlantType" (change)="selectName();">
              <option selected="" value="">--Select Type--</option>
              <option [ngValue]="powerPlantType" *ngFor="let powerPlantType of powerPlantTypes">
                {{ powerPlantType }}
              </option>
            </select>
          </div>
          <div class="form-group col-xs-3" [ngClass]="{ 'has-error': f.submitted && !organizationName.valid }">
            <label for="organizationName">Organization Name</label>
            <input type="text" class="form-control-small" name="powerPlantOrganization" [(ngModel)]="model.powerPlantOrg" #organizationName="ngModel" />
          </div>
          <div class="form-group col-xs-3" [ngClass]="{ 'has-error': f.submitted && !powerPlantStatus.valid }">
            <label for="powerPlantStatus">PowerPlant Active Status</label>
            <input type="text" class="form-control-small" name="powerPlantStatus" [(ngModel)]="model.isOnlyActivePowerPlants" #powerPlantStatus="ngModel" />
          </div>
          <div class="form-group col-md-3 col-xs-4">
            <button [disabled]="loading" class="btn btn-primary">Search For PowerPant's...</button>
            <img *ngIf="loading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
          </div>
          <div class="form-group col-md-3 col-xs-3">
            <button class="btn btn-primary" (click)="reset(f)">Reset Search Criteria</button>
          </div>
        </form>

It renders fine, but when I tried to click the reset button, I get the following error:

ERROR TypeError: _co.reset is not a function
    at Object.eval [as handleEvent] (HomeComponent.html:35)
    at handleEvent (core.es5.js:12004)
    at callWithDebugContext (core.es5.js:13465)
    at Object.debugHandleEvent [as handleEvent] (core.es5.js:13053)
    at dispatchEvent (core.es5.js:8602)
    at core.es5.js:9213
    at HTMLButtonElement.<anonymous> (platform-browser.es5.js:2651)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424)
    at Object.onInvokeTask (core.es5.js:3881)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)

Here is my component class:

export class HomeComponent implements OnInit {
  // Represents the PowerPlantTypes
  powerPlantTypes = ['RampUpType', 'OnOffType'];
  // Represents the search form
  model: any = {};
  // currentUser: User;
  // represents the list of PowerPlant data
  powerPlants: PowerPlant[];
  users: User[] = [];

  constructor(private userService: UserService, private powerPlantService: PowerPlantService) {
    // this.currentUser = JSON.parse(localStorage.getItem('currentUser'));
  }

  ngOnInit() {
    this.allPowerPlants();
  }

  selectName() {
    alert(this.model.powerPlantType);
  }

  searchPowerPlants(): void {
    const powerPlantSearchParams = new PowerPlantSearchParams(
      this.model.powerPlantType,
      this.model.powerPlantOrganization,
      this.model.powerPlantName,
      this.model.page,
      this.model.powerPlantStatus);

    this.powerPlantService.searchPowerPlants(powerPlantSearchParams).subscribe(result => {
      this.powerPlants = <PowerPlant[]> result;
    });
  }

  allPowerPlants(onlyActive: boolean = false, page: number = 1): void {
    this.powerPlantService.allPowerPlants(onlyActive, page).subscribe(result => {
      this.powerPlants = <PowerPlant[]> result;
    });
  }
}

What is this error conveying?

Upvotes: 0

Views: 494

Answers (3)

HD..
HD..

Reputation: 1476

use following code with Reset Search Criteria button

(click)='form.reset()'

no parameter is required 

(click)="reset(form)"  // wrong

Upvotes: 1

user4164128
user4164128

Reputation:

Check your component class if the function named reset actually exists.

Upvotes: 1

Sergey Mell
Sergey Mell

Reputation: 8040

According to the Angular docs it seems you should call f.reset() not reset(f)

Upvotes: 1

Related Questions