0

我需要将表单从父组件注入到子组件中，以便能够像这样验证子组件输入：

    <form #formReference="ngForm">
     <child-component></child-component>
     <child-component></child-component>
     <child-component></child-component>

     <p>{{formReference.form.valid}}</p>
    </form>

现在我已经在子组件上添加了这个提供程序以使其使用父表单并且它工作正常

@Component({
  selector: 'app-child-component',
  templateUrl: './child-component.component.html',
  styleUrls: ['./child-component.component.scss'],
  viewProviders: [ { provide: ControlContainer, useExisting: NgForm } ]
})

但是，我仍然需要能够像以前一样在没有表单的情况下使用子组件。有没有办法让这个提供者成为可选的？目前，如果使用我的子组件而没有包装它，我会收到错误消息

ERROR NullInjectorError: R3InjectorError(CustomModule)[NgForm -> NgForm -> NgForm -> NgForm -> NgForm]

谢谢你的时间！

4

2 回答 2

2

使用 useFactory 方法提供可选依赖，通过在 deps 数组中设置 Optional 标志

@Component({
  selector: 'app-child-component',
  templateUrl: './child-component.component.html',
  styleUrls: ['./child-component.component.scss'],
  viewProviders: [
    {
      provide: ControlContainer,
      deps: [[Optional, NgForm]],
      useFactory: (ngForm: NgForm) => ngForm,
    },
  ],
})
于 2021-10-01T16:25:49.920 回答
0

在子组件中删除提供者并使用@Optional和@SelfNgControl直接通过构造函数注入

constructor(@Optional() @Self() public ngControl: NgControl) {
   if (this.ngControl != null) this.ngControl.valueAccessor = this;
}
于 2021-10-04T07:14:48.743 回答