Question

我在角度（5）中对此感到困惑：

我希望使用某些值初始化表单。

为此，我创建了一个组件＆＃34; group-detail＆＃34;。

对于此组件的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（＆＃34; formGroup＆＃34;），其中包含一些带有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正在返回组，或者至少，当我从方法qgroupService.getGroup（）登录时，我在http get请求之后有了组对象。

我不明白为什么我会收到这个错误：

TypeError：无法读取属性＆＃39; groupName＆＃39;未定义的

因为我认为getGroup（）会将组返回到

@Input group：Group

我可以用它来用初始值重新制作表单。

也许我太过复杂了。

任何建议都会受到赞赏（我仍然会发现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]);
  }
}

@Input，ngOnInit（）和formGroup的问题

TypeError：无法读取属性＆＃39; groupName＆＃39;未定义的

@Input group：Group

1 个答案: