Делаю форму и в одной из секций такой код:
<section formArrayName="visitedСountries">
Visited countries:
<ul>
<li *ngFor="let item of visitedСountriesControls[controls]; let i = index" formGroupName="i" [attr.data-id]="i">
<!-- <li [formGroupName]="0"> -->
<input formControlName="name" type="text">
<button type="button" title="Remove Country" class="btn waves-light waves-effect" (click)="onRemoveVisitedCountries(i)">X</button>
</li>
</ul>
<button type="button" class="btn waves-light waves-effect" (click) = "onAddVisitedCountries()">Add Country</button>
</section>
код скрипта:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormControl, FormArray, FormGroupName } from '@angular/forms';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
public infoForm: FormGroup;
public visitedСountriesControls: FormArray;
constructor(private formBuilder: FormBuilder) {
this.buildForm();
}
buildForm (){
this.infoForm = new FormGroup({
firstName: new FormControl(''),
lastName: new FormControl(''),
phoneNumber: new FormControl(''),
bio: new FormControl(''),
maritalStatus: new FormControl(''),
visitedСountries: this.formBuilder.array([
this.createValue()
]),
});
this.visitedСountriesControls = this.infoForm.get('visitedСountries') as FormArray;
console.dir(this.infoForm)
}
createValue(){
return this.formBuilder.group({
name: new FormControl('')
})
}
public onAddVisitedCountries (){
this.visitedСountriesControls.push(this.createValue());
}
public onRemoveVisitedCountries (index){
this.visitedСountriesControls.removeAt(index);
}
public onResetForm (){
this.infoForm.reset();
}
public onSubmitForm (){
console.log(this.infoForm.value);
}
ngOnInit() {
}
}
не могу понять что не так. Ошибка:
Uncaught Error: Template parse errors:
TypeError: Cannot read property 'toUpperCase' of undefined ("
Visited countries:
<ul>
<li [ERROR ->]*ngFor="let item of visitedСountriesControls[controls]; let i = index" formGroupName="i" [attr.data-i"): ng:///AppModule/HomeComponent.html@23:13
Parser Error: Unexpected token Lexer Error: Unexpected character [С] at column 20 in expression [let item of visitedСountriesControls[controls]; let i = index], expected identifier, keyword, or string at column 21 in [let item of visitedСountriesControls[controls]; let i = index] in ng:///AppModule/HomeComponent.html@23:13 (" <li *ngFor="let item of visitedСountriesControls[controls]; let i = index" formGroupName="i" [ERROR ->][attr.data-id]="i">
<!-- <li [formGroupName]="0"> -->
<input formControlName="nam"): ng:///AppModule/HomeComponent.html@23:102
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Есть json данные, чтобы отобразить их в jquery плагине генераторе дерева, нужно перевести в формат с указанием id и parent id, причем почти во всех плагинах...
Доброго времени суток, при нажатии на гамбургер открывается главное меню, и подменю, хотя подменю должно открываться при наведении на какой...
Дело такое, при нажатии на гамбургер , он анимирует и открывается меню, тут все нормНо после того как нажал на пустое место(не на меню) , меню...