角度8:组件下方的多个嵌套级别内的formControlName [英] Angular 8: formControlName inside component multiple nested levels below

问题描述

使用此资源，我想在多个嵌套级别上实现formControlName.

Using this resource, I want to implement formControlName up multiple nested levels.

角度2-组件内部的formControlName

假设实际的formGroup位于子formControlName组件之上的3个组件级别，

Say the actual formGroup lives 3 component levels above a child formControlName component,

ControlValueAccessor可以工作.但是，以上(祖父)形式的多个级别不起作用.

ControlValueAccessor works if the Parent component is right next to child. However multiple levels above (grandfather) form does not work.

是否有Service的替代品，还是有多个输入/输出?还是这些是唯一的方法?

Is there an alternative to Service, or multiple input/outputs ? Or are these the only method?

A--> Component with formGroup 
   B---> Component container
      C---> Component container
        D ---> Component with FormControlName (should pass to Component A)

组件A将从与此相似的不同子组件收集多个表单控件名称，

Component A will collect multiple form control names from different children components similar to this,

InputText.ts

export class InputTextComponent implements  AfterViewInit, ControlValueAccessor  {
  @Input() disabled: boolean;
  @Output() saveValue = new EventEmitter();

  value: string;
  onChange: () => void;
  onTouched: () => void;

  writeValue(value: any) {
    this.value = value ? value : "";
  }

  registerOnChange(fn: any) {this.onChange = fn}

  registerOnTouched(fn: any) {this.onTouched = fn}

  setDisabledState(isDisabled) {this.disabled = isDisabled}
}

InputText.html

 <input .. />

推荐答案

您可以考虑四个选项:

1)在组件上为ControlContainer提供FormControlName

d.component.ts

@Component({
  ...
  viewProviders: [
    {
      provide: ControlContainer,
      useExisting: FormGroupDirective
    }
  ]
})
export class DComponent implements OnInit {

Ng运行示例

Ng-run Example

2) 创建提供ControlContainer的简单指令

@Directive({
  selector: '[provideContainer]',
  providers: [
    {
      provide: ControlContainer,
      useExisting: FormGroupDirective
    }
  ]
})
export class ProvideContainerDirective {
}

然后将该指令放置在您的节点层次结构的顶部

then place this directive somewhere at the top of nodes hierarchy in your

d.component.html

<ng-container provideContainer>
  <input formControlName="someName">
</ng-container>

NG运行示例

Ng-run Example

3)使用FormControlDirective代替FormControlName指令

FormControlDirective 需要

您可以通过DI获取该实例:

You can get this instance either though DI:

d.component.ts

export class DComponent implements OnInit {
  control;
  constructor(private parentFormGroupDir: FormGroupDirective) { }

  ngOnInit() {
    this.control = this.parentFormGroupDir.control.get('someName');
  }

Ng运行示例

Ng-run Example

或使用一些与您的组件相关的服务.

or use some service that ties your components.

d.component.ts

export class DComponent implements OnInit {
  control: FormControl;

  constructor(private formService: FormService) { }

  ngOnInit() {
    this.control = this.formService.get('someName');
  }

NG运行示例

Ng-run Example

4)将FormGroup作为Input道具传递给孩子，或者通过DI或服务获取它，然后使用formGroup指令包装您的输入[formControlName]

d.component.html

<ng-container [formGroup]="formGroup">
 <input formControlName="..."
</ng-container>

Ng运行示例

Ng-run Example

这篇关于角度8:组件下方的多个嵌套级别内的formControlName的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！