Angular 5 Реактивная форма Не удается найти элемент управления с путем: 'addAmendmentGroups -> 0 -> addAmendmentArrayId' - PullRequest
Новая
       24

Angular 5 Реактивная форма Не удается найти элемент управления с путем: 'addAmendmentGroups -> 0 -> addAmendmentArrayId'

0 голосов
/ 18 мая 2018

Я пытаюсь создать форму, в которой пользователь может добавить несколько изменений в основной вклад.Я следовал за демонстрацией Angular Reactive Forms здесь и использую FormArray, заполненный моделью и зацикленный в ngFor в HTML, чтобы повторить элементы управления в форме.Я получаю следующие ошибки при загрузке страницы. Cannot find control with path: 'addAmendmentGroups -> 0 -> addAmendmentArrayId' Cannot find control with path: 'addAmendmentGroups -> 0 -> memberId' Когда я нажимаю кнопку +, чтобы добавить дополнительные элементы управления на страницу, я получаю те же ошибки, но для каждого элемента управления.Я уверен, что что-то мне не хватает, или это не работает для Angular5?В стороне: Да, я знаю, addAmendmentGroups - ужасное имя для массива FormArray.

Model.ts 

export class Contribution {
  amendments: Amendment[];
}

export class Amendment {
  addAmendmentArrayId: number;
  listType: ListType;
  numberReference: number;
  whiteListId: number;
  whiteListReference: number;
  memberId: number[];
}

export enum ListType {
  Numbered = 0,
  White = 1
}

Component.ts 

export class AmendmentFormComponent implements OnChanges {
  @Input()
  contribution: Contribution;

  form: FormGroup;

  public amendmentView: string;

  constructor(private fb: FormBuilder) { this.createForm(); }

  propagateChange = (_: any) => {};
  propagateTouch = (_: any) => {};

  createForm() {
    this.form = this.fb.group({
      listType: 0,

      addAmendmentGroups: this.fb.array([
        this.fb.group({
          addAmendmentGroupId: 0,
          listType: 0,
          numberedListReference: [{ value: 0, disabled: false }, Validators.required],
          whiteListId: [{ value: 0, disabled: true }, Validators.required],
          whiteListNumberReference: [{ value: 0, disabled: true }, Validators.required],
          memberName: ['', Validators.required]
        })
      ]),
      foobar: ''
    });
  }

  ngOnChanges() {
    this.rebuildForm();
  }

  rebuildForm() {
    this.form.reset({
      listType: 0,
      foobar:''
    });
    this.setAmendments(this.contribution.amendments);
  }

  get addAmendmentGroups(): FormArray {
    return this.form.get('addAmendmentGroups') as FormArray;
  }

  setAmendments(amendments: Amendment[]) {
    const amendmentFGs = amendments.map(amendment => this.fb.group(amendment));
    const amendmentFormArray = this.fb.array(amendmentFGs || []);
    this.form.setControl('addAmendmentGroups',amendmentFormArray);
  }
  addAmendment() {
    this.addAmendmentGroups.push(this.fb.group(new Amendment()));
  }
}

Component.html 

<div class="content">
  <p>Form Value:{{ form.value | json }}</p>
  <h4 class="content-title">Add amendment</h4>
  Amendment View Id :<strong>{{ amendmentView }}</strong>
  <form [formGroup]="form">
    <div formArrayName="addAmendmentGroups">
      <div *ngFor="let amendment of form.controls.addAmendmentGroups.controls; let i = index" >
        <div [formGroupName]="i">

          <input type="text" formControlName="addAmendmentArrayId" value="{{addAmendmentArrayId}}">
          <div class="row form-item">
            <div class="col-lg-2 item-instance">
              <ul class="radio-list">
                <li>
                  <input type="radio" formControlName="listType" [value]="0" name="listType" checked data-test="listTypeNumbered" tabindex="1" />
                  <span>Numbered List</span>
                </li>
                <li>
                  <input type="radio" formControlName="listType" [value]="1" name="listType" data-test="listTypeWhite" tabindex="3" />
                  <span>Whitelist</span>
                </li>
              </ul>
            </div>
          </div>
          Index={{i}}<br />
          <input type="text" formControlName="numberedListReference" [placeholder]="NUMBEREDLISTREFERENCE" data-test="numberedListReference" tabindex="2" />Reference
          <input type="number" formControlName="whiteListId" />
          <input type="text" formControlName="whiteListNumberReference" [placeholder]="WHITELISTREFERENCE" data-test="whiteListNumberReference" tabindex="5" />White
          <input type="number" formControlName="memberId" />
          <!--<oir-amendment-group [formControlName]="i"></oir-amendment-group>-->
          <br />
        </div>

      </div>
    </div>
    <input type="text" formControlName="foobar" value="" id="" />
    <button (click)="addAmendment()">+</button>
  </form>
</div>

Обновление: Я исправил опорные ошибки между моей моделью и компонентом, и это исправилоошибки при загрузке.Я обновил свой компонент, нажимая кнопку formGroup при нажатии кнопки Добавить.Однако это просто выталкивает существующую группу форм, а не новый экземпляр группы форм. 

createForm() {
    this.amendmentForm = this.fb.group({
      //addAmendmentArrayId: 0,
      listType: 0,
      numberReference: [{ value: 0, disabled: false }, Validators.required],
      whiteListId: [{ value: 0, disabled: true }, Validators.required],
      whiteListReference: [{ value: 0, disabled: true }, Validators.required],
      memberId: ['', Validators.required]
    })
    this.form = this.fb.group({
      addAmendmentGroups: this.fb.array([
        this.amendmentForm
      ]),
      foobar: ''
    });
}
  addAmendment() {
this.addAmendmentGroups.push(this.amendmentForm);

} Есть ли способ вставить новый экземплярmendmentForm в formArray, я знаю, что могу нажатьэкземпляр модели с this.addAmendmentGroups.push(new Amendment()), но это не позволяет проверять поле.

1 Ответ

0 голосов
/ 18 мая 2018

addAmendmentArrayId и memberId не существует в вашей форме. 

this.fb.group({
          addAmendmentGroupId: 0,
          listType: 0,
          numberedListReference: [{ value: 0, disabled: false }, Validators.required],
          whiteListId: [{ value: 0, disabled: true }, Validators.required],
          whiteListNumberReference: [{ value: 0, disabled: true }, Validators.required],
          memberName: ['', Validators.required]
        })

Если я прочитал ваш шаблон, ваша группа форм в вашем бланке должна быть 

 this.fb.group({
          addAmendmentArrayId : 0,
          addAmendmentGroupId: 0,
          listType: 0,
          numberedListReference: [{ value: 0, disabled: false }, Validators.required],
          whiteListId: [{ value: 0, disabled: true }, Validators.required],
          whiteListNumberReference: [{ value: 0, disabled: true }, Validators.required],
          memberName: ['', Validators.required],
          memberId: ['', Validartors.required]
        })

РЕДАКТИРОВАТЬЯ не знаю, хотите ли вы этого, но ваша модель сильно отличается от вашей формгруппы.

Исходя из вашей модели из Model.ts, ваша группа не должна быть такой?

 this.fb.group({
      addAmendmentArrayId: 0,
      listType: 0,
      numberReference: [{ value: 0, disabled: false }, Validators.required],
      whiteListId: [{ value: 0, disabled: true }, Validators.required],
      whiteListReference: [{ value: 0, disabled: true }, Validators.required],
      memberId: ['', Validators.required]
    })
...