Angular

Question

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

    <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]

感谢您的宝贵时间！

Answer 1

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

@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,
    },
  ],
})

Answer 2

在子组件中删除提供程序并使用 @Optional and @Self

通过构造函数直接注入 NgControl

constructor(@Optional() @Self() public ngControl: NgControl) {
   if (this.ngControl != null) this.ngControl.valueAccessor = this;
}

Angular - useExisting ngForm 可选

Angular - useExisting ngForm optional

angular-forms

angular-dependency-injection