Angular Form wrapper

Question

I am currently working on a wrapper for the forms. Everthing works beside the validation.The problem is that my ngForm property does not contain the controls from the ng-content. The goal is that the ngSubmit EventEmitter only emits if the form is valid.

This is the current status:

import { Component, Input, ViewChild, Output, EventEmitter } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
 selector: 'px-form',
 template: `
   <form (ngSubmit)="f.form.valid && ngSubmit.emit($event)" #f="ngForm">
     <ng-content></ng-content>
   </form>
})
export class PxFormComponent {
  @ViewChild('f') ngForm: NgForm;
  @Output() ngSubmit = new EventEmitter();
}

Be careful, your approach will probably not work with reactive form (model driven forms). — Grégory Elhaimer, Aug 28 '17 at 09:05

score 0 · Accepted Answer · answered Aug 28 '17 at 12:42

You might find a solution to your problem in this post:

Q: How to use Angular 2 template form with ng-content?

Code taken from the post:

@Component({
  selector: 'my-custom-form',
  template: `
    <form (ngSubmit)="onSubmit(editForm)" #editForm="ngForm" novalidate>               
      <ng-content></ng-content>
      <button type="submit">Submit</button>
    </form>
  `,
})
export class MyCustomFormComponent implements AfterViewInit {
  @ContentChildren(NgModel) public models: QueryList<NgModel>;
  @ViewChild(NgForm) public form: NgForm;

  public ngAfterViewInit(): void {
    let ngContentModels = this.models.toArray();
    ngContentModels.forEach((model) => {
      this.form.addControl(model);
    });
  }

  public onSubmit(editForm: any): void {
    console.log(editForm);
  }
}

perfect thank you. This is solution which i was searching for. — alc, Aug 28 '17 at 13:42

Angular Form wrapper

1 Answers1