0

这是我的 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)
4

4 回答 4

2

您需要使用事件绑定语法才能使其工作。

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

链接到文档

于 2020-01-15T17:02:20.970 回答
1

用作(click)="setInput($event)"绑定而不是onclick="setInput($event)"

于 2020-01-15T17:03:01.740 回答
1

您应该添加模板变量以将数据传递给函数。为此使用 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>
于 2020-01-15T17:38:54.287 回答
1

在你的 html

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

在您的组件中使用

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

问候

于 2020-01-15T18:39:13.520 回答