feat(core): deprecate passing content inside the 'formly-form' tag (#…

…1826)

UPGRADE-5.0.md

@@ -131,6 +131,21 @@ FormlyModule.forRoot({
 })
 ```
 
+* Passing content inside the 'formly-form' tag is deprecated.
+
+Before:
+```html
+<formly-form>
+  <button>Submit</button>
+</formly-form>
+```
+
+After:
+```html
+<formly-form></formly-form>
+<button type="submit">Submit</button>
+```
+
 @ngx-formly/material
 --------------------
 **Note**: this only affect the user's who import sub-modules of `@ngx-formly/material` instead of main module `FormlyMaterialModule`.

src/core/src/lib/components/formly.form.ts

@@ -1,4 +1,4 @@
-import { Component, DoCheck, OnChanges, Input, SimpleChanges, Optional, EventEmitter, Output, OnDestroy, Attribute } from '@angular/core';
+import { Component, DoCheck, OnChanges, Input, SimpleChanges, Optional, EventEmitter, Output, OnDestroy, Attribute, ViewChild, ElementRef } from '@angular/core';
 import { FormGroup, FormArray, FormGroupDirective } from '@angular/forms';
 import { FormlyFieldConfig, FormlyFormOptions, FormlyFormOptionsCache } from './formly.field.config';
 import { FormlyFormBuilder } from '../services/formly.form.builder';
@@ -17,7 +17,9 @@ import { debounceTime } from 'rxjs/operators';
       [model]="field.model"
       [field]="field">
     </formly-field>
-    <ng-content></ng-content>
+    <ng-container #content>
+      <ng-content></ng-content>
+    </ng-container>
   `,
   providers: [FormlyFormBuilder],
 })
@@ -37,6 +39,11 @@ export class FormlyForm implements DoCheck, OnChanges, OnDestroy {
   get options() { return this._options; }
 
   @Output() modelChange = new EventEmitter<any>();
+  @ViewChild('content') set content(content: ElementRef<HTMLElement>) {
+    if (content.nativeElement.nextSibling) {
+      console.warn(`NgxFormly: content projection for 'formly-form' component is deprecated since v5.5, you should avoid passing content inside the 'formly-form' tag.`);
+    }
+  }
 
   private immutable = false;
   private _model: any;