0

我想在提交表单时使用输入元素的属性。我阅读了模板引用变量的概念，它有助于在 Angular 中实现这种情况。

当我为输入元素的“id”属性分配一个值时，稍后当我尝试获取时，它会引发错误。它只允许模板引用变量来提取属性。

为什么我们不直接调用它的 ID 属性来访问 input 元素的属性

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-test',
  // templateUrl: './test.component.html',
  template : `
  <input type="text" id = "{{idOne}}"  #idTwo/>
  <button type="text" (click) = 
handleClickEvent(id.value)>Submit</button>

<button type="text" (click) = handleClickEvent(idTwo.value)>Submit 
Again</button>`,
  styles: [`p {color : red}`]
})
export class TestComponent implements OnInit {

  handleClickEvent = (value : string) =>{
    console.log(value);
  }

  public idOne = "testID";
  constructor() { }

  ngOnInit() {
  }

}

当我提交第一个按钮（直接调用 ID）时，它会抛出错误说

无法读取未定义的值。

当我提交第二个按钮时，它会打印我输入的正确值。

所以我的问题是

模板引用变量是获取 HTML 元素属性的唯一方法吗？

你不能以传统方式获取属性（直接调用 id 属性）吗？

4

1 回答 1

1

在 Angular 中，直接在 DOM 元素上使用 JavaScript 通常不是必需的。

您需要按如下方式调整代码：

  • 在组件类中，声明您的属性以在模板上进行绑定
  • 为按钮创建一个点击处理程序

零件

export class TestComponent {

  idVal = 'testID';  

  submit(): void {
    // Not sure what needs to happen here.
  }    

  submitAgain(): void {
    // Not sure what needs to happen here.
  }    

  constructor() { }
}

然后，在您的模板中，将输入字段绑定到属性，并将单击处理程序绑定到按钮。

模板

<input type="text" [(ngModel)]="idVal" />

<button type="text" (click)="submit()">Submit</button>    
<button type="text" (click)="submitAgain()">Submit Again</button>

规则

  • 不要使用 DOM 从表单字段中存储/检索值。这就是ngModel的用途。
  • 不要将参数传递给事件处理程序方法。事件处理程序所需的数据应作为组件的属性值包含。
于 2019-06-01T15:34:44.753 回答