Question

我对表格有疑问。我有一个JSON对象，其中包含一些数据，并且以HTML形式使用ngFor设置此形式的每个输入标签，使其具有此JSON中每个值之一的值。

问题是当输入数据之一发生更改并且单击发送按钮（不必更改输入值）时，我不会再将所有值存储回对象并发送到一种console.log他们的方法。

表单模板是：

    <form class="example-form"  style="margin-left: 500px;">
      <mat-form-field class="example-full-width" *ngFor=" let item of test | keyvalue">
        <input matInput placeholder="{{item.key}}" value="{{item.value}}" name="" >

      </mat-form-field>

      <button type="submit" (click)="send()">Send</button>

    </form>

    async ngOnInit() {

        this.test= await this.authService.getMultilingual('au');
    }

Answer 1

您不应该使用ngModel吗？ -用这种方式将json中的值绑定到输入的值，然后更改输入值会导致更改发送的数据值？

<input matInput placeholder="{{item.key}}" [(ngModel)]="item.value" name="" >

Answer 2

听起来像是反应式表单的完美用例。只需围绕数据模型创建一个反应式表单即可。

假设您有一些这样的数据模型：

export interface Todo {
  userId: number;
  id: number;
  title: string;
  completed: boolean;
}

用于从JSONPlaceholder获得的数据，例如。

您可以围绕它生成一个反应形式：

private generateTodoListForm(todo: Todo) {
  return this.fb.group({
    userId: [todo.userId],
    id: [todo.id],
    title: [todo.title],
    completed: [todo.completed]
  });
}

然后在模板中使用它：

<div *ngIf="(todoForm$ | async) as todoForm">
  <form [formGroup]="todoForm" (submit)="onSubmit(todoForm.value)">
    <label for="userId">User Id</label>
    <input name="userId" type="text" formControlName="userId">
    <br>
    <label for="id">Id</label>
    <input name="id" type="text" formControlName="id">
    <br>
    <label for="title">Title</label>
    <input name="title" type="text" formControlName="title">
    <br>
    <label for="completed">Completed</label>
    <input name="completed" type="checkbox" formControlName="completed">
    <br>
    <button type="submit">Submit</button>
  </form>
</div>

这是您推荐的Working Sample StackBlitz。

无法从* ng发送更改的数据用于生成带有对象类型输入的表单

2 个答案: