Angular ngmodel игнорирует атрибут значения во вводе формы - PullRequest
Новая
       44

Angular ngmodel игнорирует атрибут значения во вводе формы

0 голосов
/ 18 июня 2020

Я как бы новичок в angular и ** То, что я пытаюсь достичь, это ** мне нужно поле ввода в форме, которая имеет предварительно заполненные значения, которые я получаю от родительского компонента, и я Я использую форму на основе шаблона, поэтому я пробовал 

<input
                  type="text"
                  id="empinput1"
                  class="form-control"
                  name="empid"
                  ngModel
                  [value]="data['empid']"
                />

примечание, данные - это ввод, который я получил от родительского компонента

, и обычно onsubmit дает значение ввода в отношение к свойству name поля ввода, поэтому я могу отправить его в API. Но это дает мне пустое поле ввода вместо того, чтобы заполнять значение, установленное полем [value], любая помощь приветствуется: D

1 Ответ

0 голосов
/ 18 июня 2020

Вы должны использовать ngmodel :

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

Итак , для вашего случая (подробнее здесь ): 

<input type="text" id="empinput1" class="form-control" name="empid" [(ngModel)]="data['empid']"/>

И если вы хотите использовать в форме, вы можете проверить angular пример здесь : 

import {Component} from '@angular/core';
import {NgForm} from '@angular/forms';

@Component({
  selector: 'example-app',
  template: `
    <form #f="ngForm" (ngSubmit)="onSubmit(f)" novalidate>
      <input name="first" ngModel required #first="ngModel">
      <input name="last" ngModel>
      <button>Submit</button>
    </form>

    <p>First name value: {{ first.value }}</p>
    <p>First name valid: {{ first.valid }}</p>
    <p>Form value: {{ f.value | json }}</p>
    <p>Form valid: {{ f.valid }}</p>
  `,
})
export class SimpleFormComp {
  onSubmit(f: NgForm) {
    console.log(f.value);  // { first: '', last: '' }
    console.log(f.valid);  // false
  }
}
...