Question

我正在开发一个角度应用程序。在一个组件中，我有以下代码

export class GlobalComponent {
  @Input()
  form!: FormGroup<DeepRequired<GlobalBean>>

使用以下模板摘录

..................
<mode-impression-ticket [form]="form" [labelCheckBox]="text" ></mode-impression-ticket>
...................

这里是下面的模式-印象-票组件

@Component({
  selector: "mode-impression-ticket",
.............
export class LocalComponent implements OnInit {

  @Input()
  form!: FormGroup<DeepRequired<GlobalBean>>

  localForm: FormGroup<DeepRequired<GlobalBean>> | undefined;



@Input()
  labelCheckBox!: string

  ngOnInit() {
    this.localForm = Object.assign({}, this.form);
    console.log(this.localForm);
    console.log(this.localForm.controls['flag']?.value);
    console.log(this.labelCheckBox);

前面的组件的目的是获取具有相同表单的字段的值，然后将其转发给其父级上面的 console.log 没有给出任何错误和打印值

使用以下模板摘录

@Component({
  selector: "mode-impression-ticket",
  template: `
    <form [formGroup]="localForm">
    <mat-checkbox  formControlName="flag">{{labelCheckBox}}</mat-checkbox>
.........................................

并且在行处出现错误

TypeError: this.form._updateTreeValidity is not a function

更新

this.form 在上面的两个组件中初始化（在下面的方法中的祖父组件）。子组件、父组件和祖父组件具有相同的形式

  ngOnInit() {
    this.form = VtForm.build(this._route,
      FormHelpers.getInitData(this._route),
    )
  }

Answer 1

我也忘了告诉你我使用@ng-stack/forms

最后我使用了与父级相同的表单，不要复制它

export class LocalComponent {


  @Input()
  formGroup!: FormGroup<Required<VtParamTermIhmBean>>

此外，我更改了模板（请参阅以下帖子：reactiveform that does not compile）并且一切都井井有条。讨论已结束。谢谢

mat-checkbox 显示错误 TypeError: this.form._updateTreeValidity is not a function

更新

1 个答案: