Ошибки с реактивными формами

241
13 ноября 2017, 22:42

Делаю форму и в одной из секций такой код:

<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
READ ALSO
json в дерево с указанием id и parent

json в дерево с указанием id и parent

Есть json данные, чтобы отобразить их в jquery плагине генераторе дерева, нужно перевести в формат с указанием id и parent id, причем почти во всех плагинах...

269
Открывается сразу 2 меню

Открывается сразу 2 меню

Доброго времени суток, при нажатии на гамбургер открывается главное меню, и подменю, хотя подменю должно открываться при наведении на какой...

248
Что то не так с гамбургером

Что то не так с гамбургером

Дело такое, при нажатии на гамбургер , он анимирует и открывается меню, тут все нормНо после того как нажал на пустое место(не на меню) , меню...

214