title: Why my "onclick()" event doesn't work in Angular?
body: <p>This is my HTML code:</p>
  
  <pre><code>&lt;div class="form-popup playerOne" id="myForm_input" dir="rtl"&gt;
      &lt;form action="/action_page.php" class="form-container"&gt;  
        &lt;label for="funcs"&gt;&lt;b&gt;انتخاب ورودی&lt;/b&gt;&lt;/label&gt;
  
        &lt;mat-select placeholder="انتخاب ورودی" &gt;
            &lt;mat-option *ngFor="let input of inputs" [value]="input"&gt;
              {{ input }}
            &lt;/mat-option&gt;
        &lt;/mat-select&gt;
  
          &lt;button type="submit" class="btn " style="margin-top: 270px;" onclick="setInput($event)"&gt;اعمال&lt;/button&gt;
          &lt;button type="button" class="btn cancel" onclick="closeForm()"&gt;انصراف&lt;/button&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And this is my component.ts code:</p>
  
  <pre><code>  setInput(event){
      console.log('the selected input is:' , event);
    }
  </code></pre>
  
  <p>But it seems it doesn't work because I don't see any log message on the console.</p>
  
  <p>EDIT: </p>
  
  <p>I changed my code like the following:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="form-popup playerOne" id="myForm_input" dir="rtl"&gt;
      &lt;form action="/action_page.php" class="form-container"&gt;  
        &lt;label for="funcs"&gt;&lt;b&gt;انتخاب ورودی&lt;/b&gt;&lt;/label&gt;
  
        &lt;mat-select placeholder="انتخاب ورودی" [(ngModel)] = "selectedValue"&gt;
            &lt;mat-option *ngFor="let input of inputs" [value]="input"&gt;
              {{ input }}
            &lt;/mat-option&gt;
        &lt;/mat-select&gt;
  
          &lt;button type="submit" class="btn " style="margin-top: 270px;" (click)="setInput(selectedValue)"&gt;اعمال&lt;/button&gt;
          &lt;button type="button" class="btn cancel" onclick="closeForm()"&gt;انصراف&lt;/button&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>TS:</p>
  
  <pre><code>  selectedValue: any;
    setInput(){
      console.log('the selected input is:' , this.selectedValue);
    }
  </code></pre>
  
  <p>But I get this error message:</p>
  
  <pre><code>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: &lt;input [(ngModel)]="person.firstName" name="first"&gt;
        Example 2: &lt;input [(ngModel)]="person.firstName" [ngModelOptions]="{standalone: true}"&gt;
      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)
  </code></pre>