Angular Ошибка: «Нет доступа к значению для элемента управления формы с неопределенным атрибутом имени» - Ошибка FormBuilder - PullRequest
Новая
       25

Angular Ошибка: «Нет доступа к значению для элемента управления формы с неопределенным атрибутом имени» - Ошибка FormBuilder

0 голосов
/ 30 марта 2020

Я получаю следующую ошибку «Ошибка: отсутствует элемент доступа к значению для элемента управления формы с неопределенным атрибутом имени» для этого элемента. Обычно я просто реализую что-то вроде <div>{{allNouns.length}}</div>, но это, кажется, ломает приложение. Будем очень благодарны за любые советы по FormBuilder или по именованию.

Ниже приведен элемент HTML, который вызывает эту ошибку. 

<div name="allNounsLength" [(ngModel)]="allNouns" ngDefaultControl>{{allNouns.length}}</div>

Это произошло после того, как я добавил некоторые компоненты формы в шаблон Appcomponent. Я признаю, что мне тяжело с Formbuilder. Приложение работает как задумано. Интерполированная строка allNouns.length будет отображаться при загрузке, но каждый раз, когда будет предпринято какое-либо действие ... выдается эта ошибка. Удаление ngmodel или ngdefaultcontrol приведет к его поломке.

Ниже HTML для компонента формы, который примет новое существительное и включит источник событий в pu sh вверх для appcomponent. 

</div>
    <!-- ADD NOUN COLLAPSE -->
    <app-add-person-form
    [user]='user'
    [(ngModel)]='allNouns'
    (formOut)="onReceiveNoun($event, 'nouns')"
    ></app-add-person-form>
  </div>

HTML для этого компонента формы 

  <button type="button" class="btn btn-outline-primary btn-success" (click)="isCollapsed = !isCollapsed"
          [attr.aria-expanded]="!isCollapsed" aria-controls="collapseExample">
    Add Noun
  </button>
</p>
<div id="collapseExample" [ngbCollapse]="!isCollapsed">
  <form [formGroup]="formPayload" (ngSubmit)="addNounFinal(formPayload.value); isCollapsed = !isCollapsed">
    <label for="addNoun"></label>
    <input class="addNoun" (keyup)="addNoun($event)" type="text" formControlName="addNoun" name="addNoun" [formControl]="control" required>
    <button type="submit">+</button>
  </form>
</div>````


 TS for this form component

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { FormBuilder, FormControl } from '@angular/forms';
import { HttpClient } from '@angular/common/http';


@Component({
  selector: 'app-add-person-form',
  templateUrl: './add-person-form.component.html',
  styleUrls: ['./add-person-form.component.css']
})
export class AddPersonFormComponent implements OnInit {

  @Input() user:any;

  formPayload:any;
  addNounHolder:any;
  allNouns:any;

  control: FormControl;

  @Output() formOut: EventEmitter<any> = new EventEmitter();

  constructor(
    private formBuilder: FormBuilder,
    private http: HttpClient
  ) {
    this.formPayload = this.formBuilder.group({
      addNoun:''
    });
  }

  ngOnInit() {
  }

  addNoun(event:any){
    this.addNounHolder = event.target.value
    console.log('addnoun content',this.addNounHolder)
  }

  addNounFinal(){
    console.log('hitting addnoun', this.user,this.addNounHolder);
    this.http.post(`http://localhost:8000/nouns/${this.user[0].id}`,{user_id:`${this.user[0].id}`,content:this.addNounHolder})
    .subscribe(
      data  => {
      console.log("POST Request is successful ", data);
      },
      error  => {console.log("Error", error);}
    )
    this.formOut.emit(this.addNounHolder);
    this.formPayload.reset();
    }

    }
...