角两次创建一个反应形式组件,显示一个并将另一条指令应用

时间:2018-11-13 07:06:54

标签: angular angularjs-directive angular-reactive-forms

所以我有一个角2,特别是6个反应形式的分量, 此组件嵌入另一个容器组件内部,该组件使用角cdk叠加层显示。

  • 覆盖是cdk覆盖服务,没有什么奇怪的。
  • 容器组件具有反应形式

容器组件

<form [FormGroup]="form">
<div  class="column col-5 col-mx-auto">
<reactive-form-component formControlName="dateField"></reactive-form-component>
</form>

下面的反应组件

import { Component, OnInit, forwardRef, OnDestroy } from '@angular/core';
import * as moment from 'moment';

import {
  NG_VALUE_ACCESSOR,
  ControlValueAccessor,
  FormGroup,
  FormBuilder,
  FormControl
} from '@angular/forms';
import { Subscription } from 'rxjs';
@Component({
  selector: 'er-alt-reactive-form-component',
  templateUrl: './alt-reactive-form-component.html',
  styleUrls: ['./er-alt-reactive-form-component.css'],
  providers: [
{
     provide: NG_VALUE_ACCESSOR,
      multi: true,
      useClass: forwardRef(() => AltReactiveFormComponentComponent)
    }
  ]
})
export class AltReactiveFormComponent implements ControlValueAccessor, 
OnDestroy {

 constructor( private _fb:FormBuilder) {
 console.log('cons')
}

   registerOnChange(onChange: any): void {
     console.log('c', onChange);
     console.log(this);
     // this._onChange = (x) => console
     this._onChange = onChange;
     console.log(this._onChange === onChange);
   }

   registerOnTouched(onTouch: any): void {
     console.log(this);
     console.log('t', onTouch);
     this._onTouch = onTouch;
     console.log(this._onTouch === onTouch);
   }

   }

感动和改变都是私人的 精简版,虽然显示相同错误 https://angular-1tzuhj.stackblitz.io --- stackblitz预览 https://stackblitz.com/edit/angular-1tzuhj 关于到底发生了什么的任何想法?

1 个答案:

答案 0 :(得分:0)

所以,为了后代,我把这个留在这里,我发现了问题。我用useClass代替useExisting。导致问题的原因