Question

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

这些资料-here和here-帮助我理解了为什么它不起作用。我在.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

反应形式真相来源基于类而不是模板，因此您无法绑定模板中的任何数据

由于要获取数据数组，因此需要像这样创建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帖子回复列表

1 个答案: