Выборочная недвижимость в Angular 7 - PullRequest
Новая
       13

Выборочная недвижимость в Angular 7

0 голосов
/ 01 июня 2019

Я хочу использовать свойство элемента input при отправке формы. Я прочитал концепцию ссылочной переменной Template, которая помогает в достижении этого случая в Angular.

Когда я присваиваю атрибут 'id' элементу ввода со значением и позже, когда я попытался извлечь, он выдает ошибку. Это позволяет только переменную ссылки шаблона для извлечения свойства.

Почему бы нам не получить доступ к свойству элемента input, напрямую вызвав его атрибут ID 

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() {
  }

}

Когда я отправляю 1-ю кнопку (которая вызывает ID напрямую), выдается сообщение об ошибке

не может прочитать значение undefined.

Когда я отправляю вторую кнопку, она печатает правильное введенное мной значение.

Так что мой вопрос

Является ли ссылочная переменная шаблона единственным способом получения свойства элемента HTML?

Не можете ли вы получить свойство традиционным способом (напрямую вызывая свойство id)?

1 Ответ

1 голос
/ 01 июня 2019

Использование JavaScript непосредственно для элементов DOM обычно не является тем, что необходимо в Angular.

Вам необходимо настроить код следующим образом:

  • В классе компонентов объявитесвойства для привязки в шаблоне
  • Создайте обработчик щелчка для кнопки

Компонент 

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 .
  • Не передавайте аргументы в методы обработчика событий.Данные, необходимые для обработчиков событий, должны содержаться в качестве значений свойств компонента.
...