How to use the @angular/core.forwardRef function in @angular/core

}

@Component({
  encapsulation: ViewEncapsulation.None,
  providers: [
    {
      multi: true,
      provide: NG_VALUE_ACCESSOR,
      // eslint-disable-next-line @typescript-eslint/no-use-before-define
      useExisting: forwardRef(() => QuillEditorComponent)
    },
    {
      multi: true,
      provide: NG_VALIDATORS,
      // eslint-disable-next-line @typescript-eslint/no-use-before-define
      useExisting: forwardRef(() => QuillEditorComponent)
    }
  ],
  selector: 'quill-editor',
  template: `
  
`
})
export class QuillEditorComponent implements AfterViewInit, ControlValueAccessor, OnChanges, OnDestroy, Validator {

  static normalizeClassNames(classes: string): string[] {
    const classList = classes.trim().split(' ')
    return classList.reduce((prev: string[], cur: string) => {
      const trimmed = cur.trim()
      if (trimmed) {
        prev.push(trimmed)
      }

import { Component, ContentChildren, forwardRef, QueryList } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { CheckboxComponent } from '../checkbox/checkbox.component';
import { EventManager } from '@angular/platform-browser';
import { CreateEditDaemonSetTplComponent } from 'app/portal/daemonset/create-edit-daemonsettpl/create-edit-daemonsettpl.component';

@Component({
  selector: 'wayne-checkbox-group',
  templateUrl: './checkbox-group.component.html',
  styleUrls: ['./checkbox-group.component.scss'],
  providers: [{
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => CheckboxGroupComponent),    // 这里指向当前组件
    multi: true
  }]
})

export class CheckboxGroupComponent implements ControlValueAccessor {
  value: any[] = new Array();
  _boxs: QueryList;
  eventList: any[] = new Array();
  updateEmit = (_: any) => {
  }

  constructor(private eventManage: EventManager) {

  }

  @ContentChildren(CheckboxComponent)

return this.multiple ? selected : (selected[0] || null);
    }

    /** Whether multiple button toggles can be selected. */
    @Input()
    get multiple(): boolean {
        return this._multiple;
    }

    set multiple(value: boolean) {
        this._multiple = coerceBooleanProperty(value);
    }

    /** Child button toggle buttons. */
    @ContentChildren(forwardRef(() => McButtonToggle)) buttonToggles: QueryList;

    /** Whether multiple button toggle group is disabled. */
    @Input()
    get disabled(): boolean {
        return this._disabled;
    }

    set disabled(value: boolean) {
        this._disabled = coerceBooleanProperty(value);

        if (!this.buttonToggles) {
            return;
        }

        this.buttonToggles.forEach((toggle) => toggle.markForCheck());
    }

import {AfterContentInit, Component, ContentChildren, EventEmitter, HostBinding, Input, OnInit, Optional, Output, Provider, Query, QueryList, ViewEncapsulation, forwardRef, ElementRef } from '@angular/core';
import {NG_VALUE_ACCESSOR, ControlValueAccessor} from '@angular/common';

const MD2_SELECT_CONTROL_VALUE_ACCESSOR = new Provider(NG_VALUE_ACCESSOR, {
  useExisting: forwardRef(() => Md2Select),
  multi: true
});

var _uniqueIdCounter = 0;

@Component({
  selector: 'md2-option',
  template: '<div class="md2-option-text"></div>',
  styles: [`
    md2-option { cursor: pointer; position: relative; display: block; align-items: center; width: auto; -moz-transition: background 0.15s linear; -o-transition: background 0.15s linear; -webkit-transition: background 0.15s linear; transition: background 0.15s linear; padding: 0 16px; height: 48px; line-height: 48px; }
    md2-option.md2-option-selected { color: #106cc8; }
    md2-option:hover, md2-option.md2-option-focused { background: #eeeeee; }
    md2-option.md2-option-disabled, md2-option.md2-option-disabled:hover { color: rgba(189,189,189,0.87); cursor: default; background: transparent; }
    md2-option .md2-option-text { width: auto; white-space: nowrap; overflow: hidden; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; font-size: 16px; }
  `],
  host: {

HostBinding
} from "@angular/core";
import { NG_VALUE_ACCESSOR } from "@angular/forms";
import {
  NarikRadioGroup,
  NARIK_DATA_DISPLAY_VALUE_INPUTS
} from "narik-ui-core";

@Component({
  selector: "narik-ngx-radio-group , narik-radio-group",
  templateUrl: "narik-ngx-radio-group.component.html",
  inputs: [...NARIK_DATA_DISPLAY_VALUE_INPUTS],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => NarikNgxRadioGroup),
      multi: true
    }
  ]
})
export class NarikNgxRadioGroup extends NarikRadioGroup {
  constructor(injector: Injector) {
    super(injector);
  }
}

export interface DateRangeSettings {
  label: string,
  hint: string,
  cancelText: string,
  errorMessage: string,
  required:string
}

@Component({
  selector: 'sam-date-range-v2',
  templateUrl: './date-range-v2.component.html',
  styleUrls: ['./date-range-v2.component.scss'],
  providers: [{
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => SamDateRangeV2Component),
    multi: true
  }]
})
export class SamDateRangeV2Component implements OnInit, ControlValueAccessor {

 /**
  * Date Range settings
  */
  @Input() dateRangeConfig: DateRangeSettings;

  /**
  * Deprecated, Sets the bound value of the component
  */
  @Input() model: DateModel = {
    startDate: '',
    endDate: ''

import { I18N_NAMESPACE, LoadingStatus } from "@batch-flask/ui";
import { ArmLocation, ArmSubscription } from "app/models";
import { ArmLocationService } from "app/services";
import { BehaviorSubject, Subject, combineLatest } from "rxjs";
import { filter, switchMap, tap } from "rxjs/operators";

import "./location-picker.scss";

@Component({
    selector: "bl-location-picker",
    templateUrl: "location-picker.html",
    changeDetection: ChangeDetectionStrategy.OnPush,
    providers: [
        { provide: I18N_NAMESPACE, useValue: "location-picker" },
        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => LocationPickerComponent), multi: true },
        { provide: NG_VALIDATORS, useExisting: forwardRef(() => LocationPickerComponent), multi: true },
    ],
})
export class LocationPickerComponent implements OnChanges, OnDestroy, ControlValueAccessor, Validator {
    public LoadingStatus = LoadingStatus;

    @Input() public subscription: ArmSubscription;
    /**
     * Show location only for the given resources
     */
    @Input() public resourceType?: string;
    public location = new FormControl();
    public locations: ArmLocation[] = [];
    public loadingStatus = LoadingStatus.Loading;

    private _subscription = new BehaviorSubject(null);
    private _resourceType = new BehaviorSubject(null);

places.forEach(place => {
      if(place._destroy == false)
        return null;
    })
    
    return {
      validatePlaces: "Trip must contain at least one place"
    };
  }
}

@Directive({
  selector: '[hasPlaces][ngModel],[hasPlaces][formControl]',
  providers: [
    { provide: NG_VALIDATORS, useExisting: forwardRef(() => TripHasPlaces), multi: true }
  ]
})

export class TripHasPlaces {

  validator: Function;

  constructor() {
    this.validator = checkIfTripHasPlaces(); 
  }

  validate(c: FormControl) {
    return this.validator(c);
  }

}

*/
import { Directive, EventEmitter, Host, Inject, Input, Optional, Output, Self, forwardRef } from '@angular/core';
import { FormControl } from '../model';
import { NG_ASYNC_VALIDATORS, NG_VALIDATORS } from '../validators';
import { AbstractFormGroupDirective } from './abstract_form_group_directive';
import { ControlContainer } from './control_container';
import { NG_VALUE_ACCESSOR } from './control_value_accessor';
import { NgControl } from './ng_control';
import { NgForm } from './ng_form';
import { NgModelGroup } from './ng_model_group';
import { composeAsyncValidators, composeValidators, controlPath, isPropertyUpdated, selectValueAccessor, setUpControl } from './shared';
import { TemplateDrivenErrors } from './template_driven_errors';
/** @type {?} */
export const formControlBinding = {
    provide: NgControl,
    useExisting: forwardRef(() => NgModel)
};
/**
 * `ngModel` forces an additional change detection run when its inputs change:
 * E.g.:
 * ```
 * <div>{{myModel.valid}}</div>
 * <input>
 * ```
 * I.e. `ngModel` can export itself on the element and then be used in the template.
 * Normally, this would result in expressions before the `input` that use the exported directive
 * to have and old value as they have been
 * dirty checked before. As this is a very common case for `ngModel`, we added this second change
 * detection run.
 *
 * Notes:
 * - this is just one extra run no matter how many `ngModel` have been changed.

import { Component, Injector, forwardRef, ChangeDetectionStrategy } from '@angular/core';
import { BaseOptionForm } from '../../base-option-form/base-option-form.component';

@Component({
  selector: 'furaffinity-form',
  templateUrl: './furaffinity-form.component.html',
  styleUrls: ['./furaffinity-form.component.css'],
  providers: [{ provide: BaseOptionForm, useExisting: forwardRef(() => FuraffinityFormComponent) }],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class FuraffinityFormComponent extends BaseOptionForm {

  constructor(injector: Injector) {
    super(injector);
    this.website = this.supportedWebsites.Furaffinity

    this.setOptionsForm({
      category: ['1'],
      species: ['1'],
      theme: ['1'],
      gender: ['0'],
      scraps: [false],
      disableComments: [false],
      folders: [[]],