如何在 angular 的 ngSubmit 函數中放入多個參數？

Question

我正在嘗試使用 3 個搜索參數（姓氏、名字、電話）顯示客戶表中的數據。 結果尚無定論，我想知道我的方法是否正確……您有解決方案嗎？

client.component.ts： client.component.ts

client.component.html： client.component.html

client.service.ts： client.service.ts

結果：

結果不正確

Answer 1

f.value不包含任何值。 f只是對 ngForm 的引用，它實際上並不保存輸入的值。 我建議將您的表單控件（輸入）重構為雙向綁定到名為personData的 object ，這也將使您稍后可以輕松訪問表單值。 onSearch2()從 object personData讀取值。 如果這對您有用，則在之后添加類型而不是any類型。

將其完全保留在模板中的其他方法，您需要在每個單獨的輸入上使用#進行唯一的模板引用，並將引用值傳遞給onSearch2() （就像您現在正在做的那樣，但不是引用f三次，而是引用每個單獨的輸入。

在 html 中重構ngSubmit並重構輸入。

(ngSubmit)="onSearch2()"

[(ngModel)]="personData.firstName"
[(ngModel)]="personData.lastName"
[(ngModel)]="personData.phone"

TS：

  personData: any = {};

  onSearch2() {
    this.clientService.searchClientUnique(personData.firstName, 
               personData.lastName, personData.phone).subscribe(data => {
    console.log(data)  
     });
  }

查看模板驅動表單的示例： https://stackblitz.com/edit/angular-6-template-driven-form-validation-z1gcbn?file=app%2Fapp.component.html

Answer 2

通過查看錯誤屏幕截圖，它似乎無法通過f.value object。 創建新客戶端的按鈕在form元素之外。 我相信您只是在調用onSearch2 function。

<div>
  <form #f="ngForm" (ngSubmit)="onSearch2(f.value)">
    <label>
      Name
      <input ngModel name="name" />
    </label>
    <label>
      Age
      <input ngModel name="age" />
    </label>
  </form>
</div>
<button type="button" (click)="form.ngSubmit.emit()">Submit</button>

在 NgForm 類型的form上調用NgForm 。

@ViewChild('f') form: NgForm;

然后調用f.ngSubmit.emit()觸發表單上的ngSubmit事件。

堆棧閃電戰