Angular 响应式表单 - 设置 *ngFor 回复列表的默认值

Question

我正在尝试为回复列表中的特定回复设置分数。最初，我尝试使用输入值属性设置默认值。当我只提交默认值时，我收到空字符串。当我更改输入字段的值时，这些值会成功传递回函数。

这些来源 - here and - 帮助我理解了为什么这行不通。我在 .ts 文件中设置的空字符串或默认值会覆盖 .html 文件中的值。我也尝试过使用ngModel，但遇到了类似的问题。

当我有许多可以单独评分的回复时，我仍在努力理解如何设置默认值。谁能帮助我了解如何在这种情况下设置默认值？

HTML 文件

<mat-card *ngFor="let reply of replies">
    <mat-card-title>
        {{reply.title}}
        {{reply.user}}
    </mat-card-title>

    <mat-card-content>
        {{reply.content}}
    </mat-card-content>

    <mat-card-actions>
        <form [formGroup]="feedbackForm">
            <div class="form-group">
                <input matInput formControlName="id" placeholder="id" type="hidden" value="{{reply._id}}>
            </div>

            <div class="form-group">
                <input matInput formControlName="grade" placeholder="Enter Grade" type="number" value="{{reply.grade}}>
            </div>
            <div>
                <button type="submit" (click)="feedbackResponse">Submit</button>
            </div>
        </form>
    </mat-card-actions>
</mat-card>

TypeScript 文件

public ngOnInit() {

    this.replies = [{
        "_id": "dkjldajl",
        "user": "Person 1",
        "title": "Person 1's Reply",
        "content": "The content that Person 1 wrote.",
        "grade": 0   
    }, {
        "_id": "danlkanl",
        "user": "Person 2",
        "title": "Person 2's Reply",
        "content": "The content that Person 2 wrote.",
        "grade": 0   
    }]

    this.feedbackForm = this._formBuilder.group({
      id: ['', Validators.required],
      grade: ['']
    })

    //How can I set the values?
       this.feedbackForm.get('id').setValue(???)
       this.feedbackForm.get('grade').setValue(???)
    //
}
  get id() {
    return this.feedbackForm.get('id');
  }

  get grade() {
    return this.feedbackForm.get('grade');
  }

feedbackResponse() {
    console.log(this.replyFeedbackForm)
}

Answer 1

反应式表单真实来源基于class而非模板，因此您无法绑定来自模板的任何数据

由于您正在获取数据数组，因此您需要像这样创建 formGroup 数组

import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  feedbackForm: FormGroup;
  replies = [{
    "_id": "dkjldajl",
    "user": "Person 1",
    "title": "Person 1's Reply",
    "content": "The content that Person 1 wrote.",
    "grade": 0
  }, {
    "_id": "danlkanl",
    "user": "Person 2",
    "title": "Person 2's Reply",
    "content": "The content that Person 2 wrote.",
    "grade": 0
  }]

  constructor(private fb: FormBuilder) {
    const controls = this.replies.map((c => this.fb.group({
      id: c._id,
      user: c.user,
      grade: c.grade,
      content: c.content
    })))

    this.feedbackForm = this.fb.group({
      replies: this.fb.array(controls)
    })
  }
  get repliesControl() {
    return this.feedbackForm.get('replies');
  }
}

示例：https://stackblitz.com/edit/angular-bjunx6

Angular 响应式表单 - 设置 *ngFor 回复列表的默认值

Angular Reactive Forms- Setting Default Values of *ngFor List of Replies to Posts

angular

angular-reactive-forms

angular6