Почему мое событие onclick () не работает в Angular?

Question

Это мой HTML код:

<div class="form-popup playerOne" id="myForm_input" dir="rtl">
    <form action="/action_page.php" class="form-container">  
      <label for="funcs"><b>انتخاب ورودی</b></label>

      <mat-select placeholder="انتخاب ورودی" >
          <mat-option *ngFor="let input of inputs" [value]="input">
            {{ input }}
          </mat-option>
      </mat-select>

        <button type="submit" class="btn " style="margin-top: 270px;" onclick="setInput($event)">اعمال</button>
        <button type="button" class="btn cancel" onclick="closeForm()">انصراف</button>
    </form>
</div>

А это мой код component.ts:

  setInput(event){
    console.log('the selected input is:' , event);
  }

Но, похоже, он не работает, потому что я не я не вижу никаких сообщений в журнале на консоли.

РЕДАКТИРОВАТЬ:

Я изменил свой код следующим образом:

HTML:

<div class="form-popup playerOne" id="myForm_input" dir="rtl">
    <form action="/action_page.php" class="form-container">  
      <label for="funcs"><b>انتخاب ورودی</b></label>

      <mat-select placeholder="انتخاب ورودی" [(ngModel)] = "selectedValue">
          <mat-option *ngFor="let input of inputs" [value]="input">
            {{ input }}
          </mat-option>
      </mat-select>

        <button type="submit" class="btn " style="margin-top: 270px;" (click)="setInput(selectedValue)">اعمال</button>
        <button type="button" class="btn cancel" onclick="closeForm()">انصراف</button>
    </form>
</div>

TS:

  selectedValue: any;
  setInput(){
    console.log('the selected input is:' , this.selectedValue);
  }

Но я получаю это сообщение об ошибке:

FlowComponent.html:8 ERROR Error: If ngModel is used within a form tag, either the name attribute must be set or the form
      control must be defined as 'standalone' in ngModelOptions.

      Example 1: <input [(ngModel)]="person.firstName" name="first">
      Example 2: <input [(ngModel)]="person.firstName" [ngModelOptions]="{standalone: true}">
    at Function.missingNameException (forms.js:5421)
    at NgModel._checkName (forms.js:5928)
    at NgModel._checkForErrors (forms.js:5905)
    at NgModel.ngOnChanges (forms.js:5803)
    at checkAndUpdateDirectiveInline (core.js:27784)
    at checkAndUpdateNodeInline (core.js:38472)
    at checkAndUpdateNode (core.js:38411)
    at debugCheckAndUpdateNode (core.js:39433)
    at debugCheckDirectivesFn (core.js:39376)
    at Object.eval [as updateDirectives] (FlowComponent.html:12)

Answer 1

Вам нужно использовать синтаксис привязки событий, чтобы заставить его работать.

<button
  type="submit"
  class="btn"
  style="margin-top: 270px;"
  (click)="setInput($event)">اعمال</button>

Ссылка на Документы

Answer 2

В вашем html

<button
  type="submit"
  class="btn"
  style="margin-top: 270px;"
  (click)="setInput()">اعمال</button>

В вашем компоненте используйте

setInput(){
  console.log('the selected input is:' , this.selectedValue);
}

С уважением

Answer 3

Вы должны добавить переменную шаблона для передачи данных в функцию. для этого используйте ngModel и передайте эту переменную ngModel в качестве входных данных для (щелчка)

     <mat-select placeholder="انتخاب ورودی" [(ngModel)] = "selectedValue">
               <mat-option *ngFor="let input of inputs" [value]="input">
                 {{ input }}
               </mat-option>
           </mat-select>

             <button type="submit" class="btn " style="margin-top: 270px;"                   (click)="setInput(selectedValue)">اعمال</button>

Answer 4

Используйте (click)="setInput($event)" в качестве привязки вместо onclick="setInput($event)"