Question

我正在尝试处理需要在其中添加一些动态字段的表单。我将这些动态条目存储在数组中。问题是当我用Ng-Model绑定输入字段时，它一次只能输入一个字符。

即如果我尝试输入例如'test'，我只能输入't'，输入下一个字符，我必须再次单击输入字段，然后输入下一个字符。没有ngModel，事情就可以正常工作，但是我需要使用ngModel才能使我的场景正常工作。下面是代码：

HTML：

<form #personalForm="ngForm" class="editForm" novalidate>
    <tbody>
        <tr *ngFor="let value of personal.array; let i = index">
            <td>
                <div class="input-group">
                    <div class="input-group-prepend">
                        <div (click)="deleteFieldValue(i)" class="input-group-text"><i class="mdi mdi-close mdi-18px"></i></div>
                    </div>
                    <input type="text" class="form-control input-md" [(ngModel)]="personal.array[i]" name="{{[i]}}" placeholder="item name">
                </div>
            </td>
        </tr>
        <tr>
            <td align="right">
                <button class="btn btn-success btn-sm" type="button" (click)="addFieldValue()" style="margin-right:10px">Add More Item</button>
                <button (click)="onEditCloseItems()" class="btn btn-primary btn-sm" type="button">Save Items</button>
            </td>
        </tr>
    </tbody>
</form>

TypeScript：

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { FormGroup, FormControl, FormArray, Validators } from '@angular/forms';
import { Personal } from '../data/formData.model';
import { FormDataService } from '../data/formData.service';

@Component({
    selector: 'app-personal',
    templateUrl: './personal.component.html'
})

export class PersonalComponent implements OnInit {

    personal: Personal;
    form: any;
    newAttribute = '';
    isEditItems: boolean;

    constructor(private router: Router, private formDataService: FormDataService) { }

    ngOnInit() {
        this.personal = this.formDataService.getPersonal();
        console.log('Personal feature loaded!');
    }

    save(form: any): boolean {
        if (!form.valid) {
            return false;
        }

        this.formDataService.setPersonal(this.personal);
        return true;
    }

    goToNext(form: any) {
        if (this.save(form)) {
            // Navigate to the work page
            this.router.navigate(['/work']);
        }
    }

    addFieldValue() {
        if (this.personal.array.length <= 8) {
            this.personal.array.push(this.newAttribute);
        } else {

        }
    }

    deleteFieldValue(index) {
        this.personal.array.splice(index, 1);
    }

    onEditCloseItems() {
        this.isEditItems = !this.isEditItems;
    }
}

formModel.ts文件：

export class Personal {
    firstName: string = '';
    lastName: string = '';
    email: string = '';
    array: string[] = [];
}

下面是表单的屏幕截图：

这里的问题是在数组的动态输入文本字段中，我只能在那些字段中输入单个字母。要输入下一个字母，我必须再次单击输入字段，任何人都可以解释为什么会发生这种情况并提供解决方案。

谢谢

Answer 1

Stackblitz example

将trackBy添加到HTML：

<tr *ngFor="let value of personal.array; let i = index; trackBy: trackByFn">

添加到您的TypeScript：

trackByFn(index: any, item: any) {
    return index;
}

Angular 4- Ng-模型无法正常工作

1 个答案: