FormArray возвращает ноль? - PullRequest
Новая
       6

FormArray возвращает ноль?

1 голос
/ 16 февраля 2020

Приветствие. Я пробовал несколько способов, но ни один из них не работает. Я сейчас на этом. Мне нужно инициировать форму массива писем 

email: [testestest]

Но я получил: 

email: [testestest]

Но мое письмо вернуло n клик. Проверь мои ts

и мои html:

1 Ответ

0 голосов
/ 16 февраля 2020

Алекс, у вас есть массив форм FormControls, а не массив форм FormGroups. Итак, вы. html должны быть похожи на 

<form *ngIf="addForm" [formGroup]="addForm">
    <div class="form-control-row" formArrayName="email"
        *ngFor="let item of addForm.get('email').controls; let i = index;">
        <div class="input-box">
            <input type="text" placeholder="E - mail" [formControlName]="i">
            <img src="../../assets/Delete.svg" alt="x-icon">
      </div>
        </div>
</form>

Убедитесь, что у вас нет [fomGroupName] = "i", и вы используете [formControlName] = "i"

Другой способ 

<form *ngIf="addForm" [formGroup]="addForm">
    <div class="form-control-row" formArrayName="email"
        *ngFor="let item of addForm.get('email').controls; let i = index;">
        <div class="input-box">
            <input type="text" placeholder="E - mail" [formControl]="item">
            <img src="../../assets/Delete.svg" alt="x-icon">
      </div>
        </div>
</form>

Обратите внимание, что в этом случае мы используем [formControl] = "item" (item - это переменная, которую вы используете в * ngFor)

Хорошо, как вы создаете formArray?

Если у вас есть массив электронных писем, вы можете сделать 

    email:  this.formBuilder.array(
             this.email.map(x=>this.formBuilder.control(x))
          )

Это вы создаете массив FormControls, используя map (преобразуйте каждый элемент массива в FormControl, который оценивает элемент массива .

ПРИМЕЧАНИЕ. На производстве вам необходимо создать метод получения для массива 

get emails()
{
    return this.form.get('email') as FormArray;
}

и выполнить итерацию по 

    *ngFor="let item of emails.controls; let i = index;">

Использование [formGroupName] = "i" и formControl он используется с FormArray из FormGroups. Например, вы можете иметь 

    email:  this.formBuilder.array(
             this.email.map(x=>this.formBuilder.group({email:x}))
          )

. Обратите внимание, что в этом случае преобразуйте каждый элемент массива в formGroup, у которой FormControl "называется" email

Вы можете увидеть все это в этом stackblitz . Я надеюсь, что пример поможет вам понять разницу

Если мы хотим добавить элемент в formArray, мы можем сделать функцию 

  addEmail(email:any)
  {
    const array=this.addForm.get('email') as FormArray 
    array.push(this.formBuilder.control(email)) //if is a FormArray of FormControl

    const array2=this.addForm.get('email2') as FormArray
    array2.push(this.formBuilder.group({email:email})) //if is a FormArray of FormGroup
  }

ПРИМЕЧАНИЕ. Сначала, если мы хотим создать пустой formArray, нам нужно использовать 

    email:  this.formBuilder.array([])

Когда мы хотим удалить элемент массива, нам нужно передать «индекс» массива, поэтому наша функция delete равна 

delete(index:number)
  {
    const array=this.addForm.get('email') as FormArray
    array.removeAt(index)

  }

, а наша. html равна 

  <div class="input-box">
        <input type="text" placeholder="E - mail" [formControl]="item">
        <img src="../../assets/Delete.svg" alt="x-icon" (click)="delete(i)">
  </div>
...