Angular 7 заполнить форму ввода
У меня проблема с заполнением данных во вводе в FormGroup.
У меня есть переменная Company с большим количеством данных.
Я создаю группу форм со всеми этими данными:
this.EditCoForm = this.formBuilder.group({
coid: ['', [Validators.required]],
coname: ['', [Validators.required]],
service: [null,],
address: ['', [Validators.required]],
state: ['', [Validators.required]],
zip: ['', [Validators.required]],
city: ['', [Validators.required]],
country: ['', [Validators.required]],
size: [null, [Validators.required]],
domain: [null, [Validators.required]],
duns: [null,],
tid1: ['', [Validators.required]],
numid1: ['', [Validators.required]],
tid2: [null,],
numid2: [null,],
tid3: [null,],
numid3: ['',],
bankname: ['', [Validators.required]],
bicswift: ['', [Validators.required]],
iban: ['', [Validators.required]],
bogid: [,[Validators.required]],
});
Я хочу поместить значения из переменной «Компания» в EditCoForm и поля ввода текста HTML.
<div class = "form-field">
<label class = "text-white">ID</label>
<br>
<input formControlName = "coid" value = "company.coid">
</div>
На HTML-странице мы должны указать значение «company.coid», но в EditCoForm при отправке это «».
Итак, как обработать поставить: (я нуб в Angular) значения «компании» в EditCoForm и в полях HTML?
Большое спасибо за помощь.
У нас есть значение company.coid на входе, но не значение в EditCoForm
см. stackblitz.com/edit/angular-7-reactive-form-example-ocx9se .value находится на входе. Разве это не то, что ты хочешь
Ответы 1
I want to put values from variable "Company" in EditCoForm and the HTML text input fields.
Вам нужно указать эти значения (из company) при создании группы форм:
// suppose company is
company = {
coid: 'coid',
coname: 'coname'
}
this.EditCoForm = this.formBuilder.group({
coid: [this.company.coid, [Validators.required]],
coname: [this.company.coname, [Validators.required]],
...
Тогда оба элемента управления формы с соответствующими именами и входными значениями (в шаблоне HTML) будут иметь значения из company:
<form [formGroup] = "EditCoForm">
<div class = "form-field">
<label class = "text-white">ID</label><br>
<input formControlName = "coid">
</div>
...
</form>
Или, если это невозможно сделать при создании группы форм, вы также можете установить значения для группы форм следующим образом:
this.EditCoForm.setValue({
coid: this.company.coid,
coname: this.company.coname,
...
});
Вот стекблиц
спасибо за вашу помощь, но это не работает полностью: с New Formcontrol все в порядке, значения находятся в EditcoForm, но во всех текстовых полях ввода ничего нет. У меня есть ошибки во всех полях ввода: ERROR TypeError: Не удается прочитать свойство «получить» неопределенного
@BenYsil, где в вашем компоненте вы создаете группу форм, вызывая this.EditCoForm = this.formBuilder.group? Наиболее распространенная причина этой ошибки — попытка доступа к группе форм в тот момент, когда она еще не создана. Здесь, который я создал через некоторое время в ngOnInit, и выдает эту ошибку, потому что в html я пытаюсь получить доступ к элементам управления формы, когда она еще не создана (форма не определена)
Да, я получил ошибку с formBuilder. Я делаю это с помощью Formgroup и делаю это в ngOnInit. и это работает.
[value] = "company.coid"это работает?