removeAt () в Angular Форма всегда удаляет первое значение - PullRequest
Новая
       9

removeAt () в Angular Форма всегда удаляет первое значение

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

Я заметил, что когда я удаляю элемент из моего FormArray, он всегда удаляет первую запись, а не передаваемый в нее индекс. Даже более странно, когда я console.log передаю значение в мою функцию, которая должна иметь тип number, я получаю целый FormControl объект, который я не могу понять, как и почему это происходит.

В целом Я создаю синтаксический анализатор SVG и работаю над формой, которую пользователь может редактировать или модифицировать перед сохранением в базу данных после того, как SVG был проанализирован и преобразован в объект данных. Я хочу, чтобы пользователь мог добавлять или удалять поля для атрибутов и стилей, поэтому у меня есть механизм, который выглядит следующим образом

AttributeListComponent.ts 

export class AttributeListComponent implements OnInit {

  @Input() AttributeListData: FormArray;

  constructor() { }

  ngOnInit() {
    //this.showData();
  }

  showData(){ console.log(this.AttributeListData); }


  addAttribute(): void{
    const newAttribute: FormGroup = CreateAttributeForm();
    let attrList: FormArray = <FormArray>this.AttributeListData as FormArray;
    //console.log(newAttribute);
    attrList.push(newAttribute);
    //this.showData();
  }

  deleteAttribute(item: number): void{
    let attrList:FormArray = this.AttributeListData as FormArray;

    console.log(item);

    attrList.removeAt(item);

    //this.AttributeListData.removeAt(item);
  }

}

AttributeListComponent. html

<section>

    <article *ngIf="!AttributeListData">
        <p>loading</p>
    </article>

    <article *ngIf="AttributeListData">

        <h5 *ngIf="AttributeListData.controls.length === 0">no attributes</h5>

        <section *ngIf="AttributeListData.controls.length > 0">


            <article *ngFor="let item of AttributeListData.controls; let i of index">

                <attribute-form-component  [AttributeFormData]="item"></attribute-form-component>
                <button (click)="deleteAttribute(i)">delete</button>

            </article>


        </section>

    </article>

    <article>
        <button (click)="addAttribute()">add</button>
    </article>

</section>

AttributeFormComponent.ts 

export class AttributeFormComponent implements OnInit {

  @Input() AttributeFormData: FormGroup;

  constructor() { }

  ngOnInit() {
  }

}

AttrbuteFormComponent. html

<article>
    <label for="attribute">
        <input
            type="text"
            name="attribute"
            id="attribute"
            [value]="AttributeFormData.controls.attribute.value[0]"
            formControlName="attribute"
        />
    </label>

    <label for="setting">
        <input
            type="text"
            name="setting"
            id="setting"
            [value]="AttributeFormData.controls.setting.value[0]"
            formControlName="setting"
        />
    </label>
</article>

Видя, что общий механизм настолько динамичен c по своей природе я решил создать отдельные функции для создания различных частей формы - вот что входит в игру CreateAttributeForm() в AttributeListComponent, которая выглядит следующим образом.

CreateAttributeForm 

export function CreateAttributeForm(data?: OvaadGraphicAttribute): FormGroup{
    return new FormGroup({
      attribute: new FormControl([(data ? data.attribute : ''), Validators.required]),
      setting:   new FormControl([(data ? data.setting : ''), Validators.required])
    }) as FormGroup;
  }

Теперь, если мы посмотрим на мою deleteAttribute() функцию ниже, console.log() каким-то образом возвращает целый FormGroup объект. 

deleteAttribute(item: number): void{
    let attrList:FormArray = this.AttributeListData as FormArray;

    console.log(item);

    attrList.removeAt(item);

    //this.AttributeListData.removeAt(item);
  }

Я даже изменил его на console.log(item.controls), и хотя VSCode выдал свою собственную внутреннюю ошибку, сообщая мне

Свойство 'controls' не существует для типа 'number'.ts (2339) * 105 7 *

он все еще отключил элементы управления для FormGroup, поэтому я действительно не понимаю, как и почему это происходит, особенно с item:number, и при этом не выдает ошибку типа. Кто-нибудь может определить, что я делаю не так? Я не удосужился использовать ControlValueAccessor или что-то еще для обновления значений в родительской форме, и мне было интересно, может быть, это как-то связано с этим, потому что я, честно говоря, не могу найти что-то, указывающее на что-то еще, что нам нужно сделать для того, чтобы удалить нужный элемент. Все просто показывает let i of index и ourDeleteItemFunction(i) как событие щелчка.

1 Ответ

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

хорошо, я только что нашел проблему. ngFor условие должно иметь let i = index, когда у меня let i of index. поэтому он должен выглядеть следующим образом 

<article *ngFor="let item of AttributeListData.controls; let i = index">
...
</article>

Это все еще не объясняет, как FormObject удалось передать аргументу типа number, но теперь это работает:)

...