Установить параметры добавляемого динамического ввода

Я хочу добавлять ввод динамически и указывать значения formControlName и placeholder для каждого добавленного ввода

это мое мнение: введите описание изображения здесь

когда я нажимаю "плюс", я хочу получить такой результат: введите описание изображения здесь

Мне удалось добавить ввод каждый раз, когда нажимается кнопка с плюсом, но я не мог указать заполнитель и значение formControlName

Это мой код ts:

 addLink() { 
 //when the plus button is clicked

   const placeholdervalue = this.addForm.get("placeholdervalue").value;
   this.items = this.addForm.get("items") as FormArray;
    this.items.push(this.createItem(placeholdervalue));
    console.log(this.addForm.get("items"));
  }

  createItem(placeholdervalue: string): FormGroup {
    let a = { [placeholdervalue]: "" };
    return this.formBuilder.group(a);
  }
  ngOnInit() {
    this.addForm = this.formBuilder.group({
      items: this.formBuilder.array([]),
      placeholdervalue: ""
    });
  }
}

это мой взгляд:

<div class="row">
            <div
              class="col-md-3"
              formArrayName="items"
              *ngFor="
                let item of addForm.get('items').controls;
                let i = index
              "
            >
              <div [formGroupName]="i">
                <mat-form-field class="example-full-width">
                  <input
                    matInput
                    formControlName="" // i want to retrieve it from item
                    placeholder="" 
                  />
                </mat-form-field>
              </div>
            </div>
          </div>

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


typescript angular angular-reactive-forms
person Az Emna    schedule 19.04.2019    source источник
comment
Почему у вас div внутри цикла for есть formControlName в качестве входного свойства? и заполнители не являются частью элементов управления реактивной формой (насколько мне известно).   -  person Ashish Ranjan    schedule 19.04.2019
comment
я хочу установить formControlName и значение заполнителя из ключа item.controls.placeholdername   -  person Az Emna    schedule 19.04.2019

Ответы (1)


arrow_upward
1
arrow_downward

Насколько я понимаю, ваше имя элемента управления формой и значение заполнителя одинаковы. Каждая FormGroup в массиве будет иметь один FormControl, имя которого будет динамическим. Если это правда, то все, что нам нужно сделать, это получить имя элемента управления формы.

Думаю, для этой цели может служить трубка. Попробуйте:

@Pipe({
  name: 'getFormControlName'
})
export class GetFormControlNamePipe implements PipeTransform {

  transform(value: FormGroup): string {
    return Object.keys(value.controls)[0]
  }

}


<div [formGroupName]="i">
  <mat-form-field class="example-full-width">
    <input
      matInput
      formControlName="{{item | getFormControlName}}"
      placeholder="{{item | getFormControlName}}" 
    />
  </mat-form-field>
</div>
person Ashish Ranjan    schedule 19.04.2019