Форма Angular2 ControlGroup, которая содержит неопределенное количество элементов управления

Как управлять с помощью Angular2 формой, которая содержит неопределенное количество полей?

В моем случае мне нужно создать, откуда пользователь может добавлять и удалять некоторый блок полей. Это похоже на адресную книгу, в которую пользователь может добавить один или десять адресов. И каждый адрес имел несколько полей, таких как улица, номер дома и так далее.

Мой вид такой:

let address = fb.group({
        street: fb.control(null, Validators.required),
        streetNumber fb.control(null, Validators.required)
    });

this.userForm = fb.group({
        name: fb.control(null, Validators.required),
        firstName: fb.control(null, Validators.required),
        address: fb.group({
            1: address
            })
        });

Я действительно не знаю, как управлять этим в шаблоне.

Я пытался написать что-то подобное в шаблоне, но, очевидно, это не сработало...

<form [ngFormModel]="userForm">
<input type="text" ngControl="name" #name="ngForm"/>
<input type="text" ngControl="firstName" #firstName="ngForm"/>

<div *ngFor="#address of userForm.controls['address'].controls">
    <input type="text" ngControl="street" #street="ngForm"/>
    <input type="text" ngControl="streetNumber" #streetNumber="ngForm"/>
</div>

EDIT

Я сделал планкер для лучшего объяснения =предварительный просмотр


angular angular2-forms angular-template
person Waldo    schedule 14.04.2016    source источник
comment
Что значит явно не работает?   -  person Günter Zöchbauer    schedule 14.04.2016
comment
Шаблон, который я написал, не работает, потому что это неправильный способ его написания. Ошибка углового повышения, потому что он не находит элемент управления «улица» в контрольной группе «userForm».   -  person Waldo    schedule 14.04.2016
comment
Не похоже, что вам нужно #street="ngForm". А если убрать?   -  person Günter Zöchbauer    schedule 14.04.2016
comment
#street=ngForm полезен для меня, потому что я использую его в компоненте, чтобы показать пользователю некоторые ошибки. Я думаю, что проблема возникла из-за ngControl = street, потому что «улица» не определена в элементе управления «userForm», а в подгруппе управления «адрес»   -  person Waldo    schedule 14.04.2016
comment
см. этот почти аналогичный вопрос, это то, что вы хотите?   -  person Ankit Singh    schedule 14.04.2016
comment
@A_Singh, да, что-то в этом роде   -  person Waldo    schedule 15.04.2016
comment
то вам просто нужно сделать то, что предложил Гюнтер. Помимо array of controls вы также можете использовать addControl и removeControl на controlGroup, если хотите.   -  person Ankit Singh    schedule 15.04.2016
comment
Я пытаюсь, не получилось. Вы можете взглянуть на plnkr.co/edit/ffYe1479WnxYOQrbxwLF?p=preview.   -  person Waldo    schedule 15.04.2016

Ответы (1)


arrow_upward
6
arrow_downward

Я реализовал это для вас, см. Plunker или еще лучше, Plunker -@waldo

import {Component} from 'angular2/core';
import {
  FORM_DIRECTIVES, FormBuilder, ControlGroup, ControlArray, Validators, NgForm, Control,
  AbstractControl
} from 'angular2/common';

@Component({
  selector: 'my-app',
  template: `
    <form [ngFormModel]="userForm" *ngIf="userForm">
      <p><label><input id="date" type="text" ngControl="name" #name="ngForm"/> Name</label></p>

      <p><label><input id="date" type="text" ngControl="firstName" #firstName="ngForm"/> FirstName</label></p>

      <h3>Add address</h3>
        <ul ngControlGroup="addresses">

        <li *ngFor="#ctrl of objToArray(userForm.find('addresses').controls); #i = index" 
        ngControlGroup="{{ctrl}}">
           {{ctrl}}:
          <input ngControl="street" placeholder="Street">
          <input ngControl="streetNumber"  placeholder="StreetNumber"> 
        </li>
      </ul>

    <div (click)="addAddress()" style="cursor: pointer"> Add Another Address</div>

    </form>

    `,
  directives: [FORM_DIRECTIVES]
})
export class AppComponent {
  userForm: ControlGroup;

  constructor(private fb: FormBuilder) {

    this.userForm = fb.group({
      name: fb.control(null, Validators.required),
      firstName: fb.control(null, Validators.required),
      addresses: fb.group({
        address1: fb.group({
          street: fb.control(null, Validators.required),
          streetNumber: fb.control(null, Validators.required)
        })
      })
    });

    console.log(this.userForm);

  }

  objToArray(o){
    return Object.keys(o);
  }

  addAddress() {
    let addressField = this.fb.group({
      street: this.fb.control(null, Validators.required),
      streetNumber: this.fb.control(null, Validators.required)
    });

    (<ControlGroup>this.userForm.find('addresses')).addControl(
      'address' + (Object.keys((<ControlGroup>this.userForm.find('addresses')).controls).length + 1), addressField);
  }
}
person Ankit Singh    schedule 15.04.2016
comment
Спасибо! Я сделал несколько тестов на своей стороне и, наконец, нашел что-то вроде вашего кода. plnkr.co/edit/ffYe1479WnxYOQrbxwLF?p=preview - person Waldo; 15.04.2016
comment
Привет, не могли бы вы, ребята, помочь мне с этой проблемой title="onsubmit возвращает все входные значения строк angular 2"> stackoverflow.com/questions/38257443/ - person Gaurav Ram; 12.07.2016
comment
Привет, Уолдо, когда я пробую ваш метод добавления еще одной строки, я получаю эту ошибку [ts] Свойство «push» не существует для типа «AbstractControl». Есть идеи, что я могу упустить? - person Gaurav Ram; 12.07.2016