Question

我目前有一个Angular表单，它使用（ngSubmit）返回表单值。我想添加另一个属性，比如输入，我可以在其中指定搜索运算符（包含，等于，以等开头）。

如何使用表单中的值获取运算符？

这是一个例子。我在两个输入中添加了operator。我想在调用搜索时以表单值返回此值。是否有我可以编写的自定义指令或扩展表单值的方法？

<form #searchForm="ngForm" (ngSubmit)="search(searchForm)">
    <input type="text" name="name" [(ngModel)]="name" operator="contains" />
    <input type="text" name="email" [(ngModel)]="email" operator="equal" />
</form>

search(form: NgForm) {
    console.log(form.value);
}

所以我会得到这样的东西或者能够绑定到那个运算符。

name: { value: 'John', operator: 'contains' }

Answer 1

只需使用合适的模型即可。操作员不需要在视图中：

this.model = {
  name: {
    value: '',
    operator: 'contains'
  },
  email: {
    value: '',
    operator: 'equal'
  }
};

search() {
  console.log(this.model);
}

并在视图中：

<form (ngSubmit)="search()">
  <input type="text" name="name" [(ngModel)]="model.name.value" />
  <input type="text" name="email" [(ngModel)]="model.email.value" />
</form>

Answer 2

您可以使用原生javascript来实现此目的：

search(form: NgForm) {
    console.log(form.value);
    const element: HTMLElement = document.getElementById('my-input');
    console.log(element.getAttribute('operator'));
}

和

<form #searchForm="ngForm" (ngSubmit)="search(searchForm)">
    <input type="text" id="my-input" name="name" [(ngModel)]="name" operator="contains" />
    <input type="text" name="email" [(ngModel)]="email" operator="equal" />
    <button type="submit">Submit</button>
</form>

你不能让它成为表单本身的一部分，除非你在它下面添加另一个输入，比如单选按钮或其他东西。对我来说，这比我上面的做法更有意义。

如何向NgForm值添加属性

2 个答案: