Угловая ссылка # против ngModel

Question

Интересно, когда мне нужно использовать [(ngModel)] на моем входе и когда я могу просто использовать #reference Например

<div class="form-group">
  <div class="input-group mb-2">
    <input type="text" class="form-control" [(ngModel)]="newUser">
    <button class="btn btn-outline-success" (click)="onAddUser()">Add user</button>
  </div>
</div>

Должен ли я сделать это здесь, или, может быть, я могу сделать это так:

<div class="form-group">
  <div class="input-group mb-2">
    <input type="text" class="form-control" #newUser>
    <button class="btn btn-outline-success" (click)="onAddUser(newUser.value)">
      Add user
    </button>
  </div>
</div>

Буду благодарен за любые ответы)

Answer 1

Из документации:

• [(ngModel)] позволяют связать значение элемента шаблона с переменной компонента.
  
• #: можно ссылаться в любом месте шаблона

Таким образом, ngModel ссылается на значение переменной, в то время как ссылка # ссылается на объект шаблона (элемент HTML). Однако вы все равно можете получить доступ к ссылочной переменной шаблона с помощью ViewChild.

Я думаю, что приведенные вами примеры верны. Я бы предпочел использовать ngModel, если мне нужно значение в моем компоненте, и #, если оно мне нужно в DOM.

Answer 2

Вам не нужно использовать [(ngModel)], Когда-либо.NgModel является частью угловой FormsModule, Если у вас есть FormsModule импортированные, вы можете использовать дополнительную функциональность ngModel, Это создает NgForm а также FormControl что вы можете использовать в более сложных реактивных и динамических формах и отслеживать статус поля, например, грязный, затронутый. Это также позволит вам разместить валидаторы ошибок в поле, а также отобразить наблюдаемый поток изменений значений.

Используя переменные шаблона и ViewChild просто захватить элемент ввода и взаимодействовать с ним, как если бы вы использовали vanilla JS, тоже хорошо, особенно если ваш вариант использования прост. Таким образом, вы можете избежать включения FormsModule в вашем модуле.

Answer 3

Это две разные концепции:

NgModel

Создает FormControl экземпляр из доменной модели и связывает его с элементом управления формой.

В то время как переменная шаблона ссылки

(...) часто является ссылкой на элемент DOM в шаблоне. Это также может быть ссылка на угловой компонент или директиву или веб-компонент. (...)

Они совершенно разные, и это зависит от вашего варианта использования.

Например, если вы хотите сослаться на какую-то модель (ngModel) используя var через оставшуюся часть html, вы можете сделать:

<div class="form-group">
  <div class="input-group mb-2">
    <input type="text" class="form-control" [(ngModel)]="newUser" #newUser="ngModel">
    <button class="btn btn-outline-success" (click)="onAddUser()">Add user</button>
  </div>
</div>

Теперь вы можете использовать #newUser для некоторых проверок формы и т. д. в HTML.

Answer 4

Для простых двухстороннего связывания (между компонентом и шаблоном) [(ngModel)] может быть предпочтительными, но с локальной ссылкой мы можем работать с любыми свойствами каких - либо элементов (при необходимости), а не только с значением в качестве ввода элемент.