Angular中将API返回值传递给formControlName后表单字段不显示如何解决

问题原因 #

1. Angular响应式表单会完全接管输入框的值，你手动给input加的value="{{x.person_id}}"属性优先级低于FormControl的控制，本身就不会生效。
2. 你写的setValue()方法从头到尾没有被调用过，自然不会把API返回的值写入表单控件。
3. 你在*ngFor循环中复用了同一个全局的SignupForm实例，所有表单会共用同一份值，哪怕赋值成功所有表单的内容也会完全一致，逻辑不符合你的需求。

修正方案 #

1. 修改TS文件代码

export class BookedEventComponent implements OnInit {
  events: any;

  constructor(
    private authService: AuthService,
    private router: Router,
    public formBuilder: FormBuilder,
  ) { }

  ngOnInit(): void {
    this.authService.getEvents().subscribe(response => {
      this.events = response;
      console.log(response);
    })
  }

  // 为每条预约记录生成独立的表单实例，直接写入对应值
  generateCancelForm(x: any) {
    return this.formBuilder.group({
      person_id: [x.person_id],
      event_id: [x.event_id]
    });
  }

  cancelBooking(formValue: any) {
    console.log(formValue);
    if (confirm("你确定要删除该预约吗？")) {
      this.authService.cancelSlot(formValue).subscribe(response => {
        setTimeout(() => {
          this.router.navigate(['/schedule']);
        }, 1000);
      })
    }
  }
}

2. 修改模板代码

<div *ngFor="let item of events">
    <div *ngFor="let x of item">
        <!-- 为每个表单生成独立的实例，提交时直接传当前表单的值 -->
        <form action="" [formGroup]="generateCancelForm(x)" (ngSubmit)="cancelBooking($event)">
            <div class="pageTitle SystemPageTitle text-center mt-5 schedule_heading">
               Slot : {{x.event_id}}
            </div>
            <div class="container mb-5 mt-3">
                <div class="card">
                    <div>
                        <!-- 删掉没用的value属性 -->
                        <input type="text" formControlName="person_id"><br>
                        <input type="text" formControlName="event_id">
                    </div>
                    <div class="" data-editablearea="0" data-areaheight="auto">
                        <p align="center">
                            <!-- 不需要重复绑定click事件，form的ngSubmit已经绑定了提交逻辑 -->
                            <button type="submit" class="button buttonCancel">Delete</button>
                        </p>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

修改完成后输入框就会正常显示API返回的对应值，提交时也会正确传递当前条目的参数。

内容的提问来源于stack exchange，提问作者Bjorn Liza