@Input、ngOnInit() 和 formGroup 问题

Question

我在 angular (5) 中为此苦苦挣扎：

我想要一个用一些值初始化的表单。

为此，我创建了一个组件 "group-detail"。

对于此组件的 html 部分 (group-detail.component.html)，我有以下内容：

<div *ngIf="group">
  ...
  <!-- Stuff before the form like ({{group.questionGroupId}} -->
  ...
  <form [formGroup]="formGroup" class="group-detail-form">
    <mat-form-field>
      <input matInput placeholder="Group Name" formControlName="groupName" required>
    </mat-form-field>
    <mat-form-field>
      <input matInput placeholder="Creation Date" formControlName="creationDate">
    </mat-form-field>
    <mat-form-field *ngIf="group.lastModificationDate">
      <input matInput placeholder="Last Modification " formControlName="lastModificationDate">
    </mat-form-field>
    <mat-form-field *ngIf="group.isDeleted == true">
      <input matInput placeholder="Deleted" formControlName="isDeleted">
    </mat-form-field>
    <mat-form-field *ngIf="group.deletedOn">
      <input matInput placeholder="Deleton on" formControlname="deletedOn">
    </mat-form-field>
    <mat-form-field>
      <input matInput placeholder="Description" formControlname="description">
    </mat-form-field>
  </form>
  ...
  <!-- Stuff after the form (buttons, ...) -->
  ...
</div>

所以我有一个 formGroup ("formGroup")，其中包含一些带有 formControlName 的输入。

在组件打字稿中，我有以下内容：

export class GroupDetailComponent implements OnInit {

  @Input() group: Group;

  formGroup: FormGroup;

  constructor(
    private route: ActivatedRoute,
    private qgroupService: QGroupService,
    private location: Location
  ) { 
      this.formGroup = new FormGroup({
        groupName: new FormControl({ value: ''}, [Validators.required, Validators.minLength(3)]),
        creationDate: new FormControl({ value: '', disabled: true }),
        lastModificationDate: new FormControl({ value: '', disabled: true }),
        isDeleted: new FormControl({ value: '', disabled: true }),
        deletedOn: new FormControl({ value: '', disabled: true }),
        description: new FormControl({ value: '' })
      });
    }

    ngOnInit() {
      this.getGroup();
      this.formGroup = new FormGroup({
        groupName: new FormControl({ value: this.group.groupName }, [Validators.required, Validators.minLength(3)]),
        creationDate: new FormControl({ value: this.group.creationDate, disabled: true }),
        lastModificationDate: new FormControl({ value: this.group.lastModificationDate, disabled: true }),
        isDeleted: new FormControl({ value: this.group.isDeleted, disabled: true }),
        deletedOn: new FormControl({ value: this.group.deletedOn, disabled: true }),
        description: new FormControl({ value: this.group.description })
      });
    }

    getGroup(): void {
      const id = +this.route.snapshot.paramMap.get('questionGroupId');
      this.qgroupService.getGroup(id).subscribe(group => this.group = group);
    }

}

因此，我必须在构造函数中创建一个新的 formGroup 实例，否则会出现错误。之后，ngOnInit() 应该获取具有特定 id 的组并重建包含内部值的表单。
我知道 qgroupService 正在 returning 组，或者至少，当我从方法 qgroupService.getGroup() 登录时，我在 http get 请求后有组对象。

我还不明白为什么会出现此错误：

TypeError: 无法读取未定义的 属性 'groupName'

因为我认为 getGroup() 会 return 组到

@输入组：组

而且我可以用它来重新制作具有初始值的表单。

也许我把事情复杂化了。

如有任何建议，我们将不胜感激（我仍在探索 Angular 5 和 Typescript），

提前谢谢你。

Answer 1

我在实现与此非常相似的东西时遇到了一些麻烦。如果我没理解错的话，这里有一些可能有用的建议：

1) 只设置一次this.formgroup。不要重置它。

2) 在 getGroup() 中，遍历 this.group 的键来为每个 this.formGroup formControls:

设置相关值

getGroup(): void {
  const id = +this.route.snapshot.paramMap.get('questionGroupId');
  this.qgroupService.getGroup(id).subscribe(group => {
      this.group = group;
      for (const key in group) {
           this.formGroup.controls[key].setValue(group[key]);
      }
  });
}

3) 如果组作为 @Input() 传入，是否需要 getGroup()？如果没有必要，可以在 ngOnInit:

中调用上面的循环

ngOnInit() {
  for (const key in this.group) {
      this.formGroup.controls[key].setValue(this.group[key]);
  }
}