функция validateTopic (значение) не работает

Question

Я хочу, чтобы метод в app.component.ts вызывался для (размытия) и (изменения) в app.component.html

app.component.html

<select (blur)="validateTopic(topic.value)" (change)="validateTopic(topic.value)" required #topic="ngModel" [class.is-invalid]="topic.invalid && topic.touched" class="custom-select" name="topic" [(ngModel)]="userModel.topic">
  <option value='default'>I am interested in</option>
  <option *ngFor="let topic of topics">{{topic}}</option>
</select>

app.component.ts

validateTopic(value)
 {
 if(value==='default')
 {
   this.topicHasError=true;
 }
 else{
   this.topicHasError=false;
 }
}

В коде VS Code он показывает,

ERROR in app/app.module.ts(19,1): error TS2304: Cannot find name 'validateTopic'.
app/app.module.ts(19,15): error TS2304: Cannot find name 'value'.
app/app.module.ts(21,4): error TS2304: Cannot find name 'value'.

В окне браузера он показывает

app.module.ts:19 Uncaught ReferenceError: validateTopic is not defined
    at Module../src/app/app.module.ts (app.module.ts:19)
    at __webpack_require__ (bootstrap:78)
    at Module../src/main.ts (main.ts:1)
    at __webpack_require__ (bootstrap:78)
    at Object.0 (main.ts:12)
    at __webpack_require__ (bootstrap:78)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.js:1

Answer 1

Это должно работать.

app.component.html

<select (blur)="validateTopic($event.target.value)" 
(change)="validateTopic($event.target.value)">
<option value='default'>I am interested in</option>
<option *ngFor="let topic of topics">{{topic}}</option>
</select>

app.component.ts

 validateTopic(value) {
    if(value==='default') {

    }
    else
    {     
    console.log(value);
    }
    }

Answer 2

Ваш app.component.ts должен выглядеть следующим образом:

import { Component } from '@angular/core';
@Component({
    selector: 'whatever',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent {
    validateTopic(value)
    {
     if(value==='default')
     {
       this.topicHasError=true;
     }
     else{
       this.topicHasError=false;
     }
    }

}