角度4リセットボタンは、私は私のHTML要素に次の形式を持っているエラー

Question

を例外：

<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> 

それは罰金レンダリングが、私は、リセットボタンをクリックしようとしたとき、私は次のエラーを取得する：

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) 

ここで

は私のコンポーネントクラスです：

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; 
    }); 
    } 
} 

このエラーが運搬されて何？

Answer 1

あなたがf.reset()ないreset(f)

Answer 2

を呼び出す必要がありそうですAngular docsによるリセットという名前の関数が実際に存在する場合は、あなたのコンポーネントクラスを確認してください。リセット検索条件ボタンでコード

(click)='form.reset()' 

次

Answer 3

使用何らパラメータが

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