首页 文章

@Input，ngOnInit（）和formGroup的问题

提问于
浏览 次
1

我在角度（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正在返回组，或者至少，当我从方法qgroupService.getGroup（）登录时，我在http get请求之后有了组Object .

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

TypeError：无法读取未定义的属性“groupName”

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

@Input group：Group

并且我可以用它来用初始值重新制作我的表单 .

也许我太复杂了 .

任何建议将不胜感激（我仍然发现Angular 5和Typescript），

先感谢您 .

angular typescript angular2-forms

1 回答

  • 0

    我在实现与此非常相似的方面遇到了一些麻烦 . 如果我理解正确，这里有一些可能有用的建议：

    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]);
  }
}
    回复于

相关问题