feat(core): mark define fieldComponent optional for custom wrapper (#1694)

Author: aitboudad

demo/src/app/examples/bootstrap-specific/bootstrap-horizontal/horizontal-wrapper.ts

@@ -1,4 +1,4 @@
-import { Component, ViewChild, ViewContainerRef } from '@angular/core';
+import { Component } from '@angular/core';
 import { FieldWrapper } from '@ngx-formly/core';
 
 @Component({
@@ -16,5 +16,4 @@ import { FieldWrapper } from '@ngx-formly/core';
   `,
 })
 export class FormlyHorizontalWrapper extends FieldWrapper {
-  @ViewChild('fieldComponent', { read: ViewContainerRef }) fieldComponent: ViewContainerRef;
 }

demo/src/app/examples/other/hide-fields-with-animations/animation-wrapper.component.ts

@@ -1,4 +1,4 @@
-import { Component, ViewChild, ViewContainerRef } from '@angular/core';
+import { Component } from '@angular/core';
 import { FieldWrapper } from '@ngx-formly/core';
 
 import { trigger, state, style, transition, animate, group } from '@angular/animations';
@@ -48,5 +48,4 @@ const SlideInOutAnimation = [
   animations: [SlideInOutAnimation],
 })
 export class AnimationWrapperComponent extends FieldWrapper {
-  @ViewChild('fieldComponent', {read: ViewContainerRef}) fieldComponent: ViewContainerRef;
 }

demo/src/app/examples/other/material-prefix-suffix/addons.wrapper.ts

@@ -1,4 +1,4 @@
-import { Component, TemplateRef, ViewChild, ViewContainerRef, AfterViewInit } from '@angular/core';
+import { Component, TemplateRef, ViewChild, AfterViewInit } from '@angular/core';
 import { FieldWrapper } from '@ngx-formly/core';
 
 @Component({
@@ -30,7 +30,6 @@ import { FieldWrapper } from '@ngx-formly/core';
   `,
 })
 export class FormlyWrapperAddons extends FieldWrapper implements AfterViewInit {
-  @ViewChild('fieldComponent', {read: ViewContainerRef}) fieldComponent!: ViewContainerRef;
   @ViewChild('matPrefix') matPrefix: TemplateRef<any>;
   @ViewChild('matSuffix') matSuffix: TemplateRef<any>;
 

demo/src/app/examples/other/nested-formly-forms/panel-wrapper.component.ts

@@ -1,4 +1,4 @@
-import { Component, ViewChild, ViewContainerRef } from '@angular/core';
+import { Component } from '@angular/core';
 import { FieldWrapper } from '@ngx-formly/core';
 
 @Component({
@@ -13,5 +13,4 @@ import { FieldWrapper } from '@ngx-formly/core';
   `,
 })
 export class PanelWrapperComponent extends FieldWrapper {
-  @ViewChild('fieldComponent', {read: ViewContainerRef}) fieldComponent: ViewContainerRef;
-}
+}

demo/src/app/guides/custom-formly-wrapper.md

@@ -53,7 +53,6 @@ See live demo: [demo](https://stackblitz.com/angular/dleylnmrbmd?file=app%2Fapp.
     `,
   })
   export class PanelWrapperComponent extends FieldWrapper {
-    @ViewChild('fieldComponent', {read: ViewContainerRef}) fieldComponent: ViewContainerRef;
   }
   ```
 

src/bootstrap/addons/src/addons.component.ts

@@ -1,4 +1,4 @@
-import { Component, ViewChild, ViewContainerRef } from '@angular/core';
+import { Component } from '@angular/core';
 import { FieldWrapper } from '@ngx-formly/core';
 
 @Component({
@@ -7,8 +7,6 @@ import { FieldWrapper } from '@ngx-formly/core';
   styleUrls: ['./addons.component.scss'],
 })
 export class FormlyWrapperAddons extends FieldWrapper {
-  @ViewChild('fieldComponent', {read: ViewContainerRef}) fieldComponent!: ViewContainerRef;
-
   addonRightClick($event: any) {
     if (this.to.addonRight.onClick) {
       this.to.addonRight.onClick(this.to, this, $event);

src/bootstrap/src/lib/wrappers/form-field.wrapper.ts

@@ -1,4 +1,4 @@
-import { Component, ViewChild, ViewContainerRef } from '@angular/core';
+import { Component } from '@angular/core';
 import { FieldWrapper } from '@ngx-formly/core';
 
 @Component({
@@ -21,5 +21,4 @@ import { FieldWrapper } from '@ngx-formly/core';
   `,
 })
 export class FormlyWrapperFormField extends FieldWrapper {
-  @ViewChild('fieldComponent', { read: ViewContainerRef }) fieldComponent!: ViewContainerRef;
 }

src/core/src/lib/components/formly.field.spec.ts

@@ -1,7 +1,7 @@
 import { TestBed, ComponentFixture } from '@angular/core/testing';
 import { createGenericTestComponent } from '../test-utils';
 
-import { Component, ViewChild, ViewContainerRef } from '@angular/core';
+import { Component } from '@angular/core';
 import { FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';
 import {
   FormlyModule,
@@ -248,7 +248,6 @@ export class FormlyFieldText extends FieldType {}
   `,
 })
 export class FormlyWrapperLabel extends FieldWrapper {
-  @ViewChild('fieldComponent', {read: ViewContainerRef}) fieldComponent: ViewContainerRef;
 }
 
 export class Manipulator {

src/core/src/lib/templates/field.wrapper.ts

@@ -1,7 +1,7 @@
-import { ViewContainerRef } from '@angular/core';
+import { ViewContainerRef, ViewChild } from '@angular/core';
 import { FieldType } from './field.type';
 import { FormlyFieldConfig } from '../components/formly.field.config';
 
 export abstract class FieldWrapper<F extends FormlyFieldConfig = FormlyFieldConfig> extends FieldType<F> {
-  fieldComponent: ViewContainerRef;
+  @ViewChild('fieldComponent', { read: ViewContainerRef }) fieldComponent: ViewContainerRef;
 }

src/ionic/src/lib/wrappers/form-field.ts

@@ -1,4 +1,4 @@
-import { Component, ViewChild, ViewContainerRef } from '@angular/core';
+import { Component } from '@angular/core';
 import { FieldWrapper } from '@ngx-formly/core';
 
 @Component({
@@ -22,6 +22,4 @@ import { FieldWrapper } from '@ngx-formly/core';
     </ion-item>
   `,
 })
-export class FormlyWrapperFormField extends FieldWrapper {
-  @ViewChild('fieldComponent', { read: ViewContainerRef }) fieldComponent: ViewContainerRef;
-}
+export class FormlyWrapperFormField extends FieldWrapper {}