angular-cn/modules/angular2/test/forms/integration_spec.ts

import {Component, Directive, View} from 'angular2/angular2';
import {
  afterEach,
  AsyncTestCompleter,
  TestComponentBuilder,
  By,
  beforeEach,
  ddescribe,
  describe,
  dispatchEvent,
  fakeAsync,
  tick,
  expect,
  it,
  inject,
  iit,
  xit
} from 'angular2/test_lib';

import {DOM} from 'angular2/src/dom/dom_adapter';
import {NgIf, NgFor} from 'angular2/directives';

import {
  Control,
  ControlGroup,
  NgForm,
  formDirectives,
  Validators,
  NgControl,
  ControlValueAccessor
} from 'angular2/forms';

export function main() {
  describe("integration tests", () => {
    it("should initialize DOM elements with the given form object",
       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
         var t = `<div [ng-form-model]="form">
                <input type="text" ng-control="login">
               </div>`;

         tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((rootTC) => {
           rootTC.componentInstance.form = new ControlGroup({"login": new Control("loginValue")});
           rootTC.detectChanges();

           var input = rootTC.query(By.css("input"));
           expect(input.nativeElement.value).toEqual("loginValue");
           async.done();
         });
       }));

    it("should update the control group values on DOM change",
       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
         var form = new ControlGroup({"login": new Control("oldValue")});

         var t = `<div [ng-form-model]="form">
                <input type="text" ng-control="login">
              </div>`;

         tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((rootTC) => {
           rootTC.componentInstance.form = form;
           rootTC.detectChanges();
           var input = rootTC.query(By.css("input"));

           input.nativeElement.value = "updatedValue";
           dispatchEvent(input.nativeElement, "change");

           expect(form.value).toEqual({"login": "updatedValue"});
           async.done();
         });
       }));

    it("should emit ng-submit event on submit",
       inject(
           [TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => {
             var t =
                 `<div><form [ng-form-model]="form" (ng-submit)="name='updated'"></form><span>{{name}}</span></div>`;

             var rootTC;

             tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((root) => { rootTC = root; });
             tick();
             rootTC.componentInstance.form = new ControlGroup({});
             rootTC.componentInstance.name = 'old';

             tick();

             var form = rootTC.query(By.css("form"));
             dispatchEvent(form.nativeElement, "submit");

             tick();
             expect(rootTC.componentInstance.name).toEqual('updated');
           })));

    it("should work with single controls",
       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
         var control = new Control("loginValue");

         var t = `<div><input type="text" [ng-form-control]="form"></div>`;

         tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((rootTC) => {
           rootTC.componentInstance.form = control;
           rootTC.detectChanges();

           var input = rootTC.query(By.css("input"));
           expect(input.nativeElement.value).toEqual("loginValue");

           input.nativeElement.value = "updatedValue";
           dispatchEvent(input.nativeElement, "change");

           expect(control.value).toEqual("updatedValue");
           async.done();
         });
       }));

    it("should update DOM elements when rebinding the control group",
       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
         var t = `<div [ng-form-model]="form">
                <input type="text" ng-control="login">
               </div>`;

         tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((rootTC) => {
           rootTC.componentInstance.form = new ControlGroup({"login": new Control("oldValue")});
           rootTC.detectChanges();

           rootTC.componentInstance.form = new ControlGroup({"login": new Control("newValue")});
           rootTC.detectChanges();

           var input = rootTC.query(By.css("input"));
           expect(input.nativeElement.value).toEqual("newValue");
           async.done();
         });
       }));

    it("should update DOM elements when updating the value of a control",
       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
         var login = new Control("oldValue");
         var form = new ControlGroup({"login": login});

         var t = `<div [ng-form-model]="form">
                <input type="text" ng-control="login">
               </div>`;

         tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((rootTC) => {
           rootTC.componentInstance.form = form;
           rootTC.detectChanges();

           login.updateValue("newValue");

           rootTC.detectChanges();

           var input = rootTC.query(By.css("input"));
           expect(input.nativeElement.value).toEqual("newValue");
           async.done();
         });
       }));

    it("should mark controls as touched after interacting with the DOM control",
       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
         var login = new Control("oldValue");
         var form = new ControlGroup({"login": login});

         var t = `<div [ng-form-model]="form">
                <input type="text" ng-control="login">
               </div>`;

         tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((rootTC) => {
           rootTC.componentInstance.form = form;
           rootTC.detectChanges();

           var loginEl = rootTC.query(By.css("input"));
           expect(login.touched).toBe(false);

           dispatchEvent(loginEl.nativeElement, "blur");

           expect(login.touched).toBe(true);

           async.done();
         });
       }));

    describe("different control types", () => {
      it("should support <input type=text>",
         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
           var t = `<div [ng-form-model]="form">
                  <input type="text" ng-control="text">
                </div>`;

           tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((rootTC) => {
             rootTC.componentInstance.form = new ControlGroup({"text": new Control("old")});
             rootTC.detectChanges();

             var input = rootTC.query(By.css("input"));
             expect(input.nativeElement.value).toEqual("old");

             input.nativeElement.value = "new";
             dispatchEvent(input.nativeElement, "input");

             expect(rootTC.componentInstance.form.value).toEqual({"text": "new"});
             async.done();
           });
         }));

      it("should support <input> without type",
         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
           var t = `<div [ng-form-model]="form">
                  <input ng-control="text">
                </div>`;

           tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((rootTC) => {
             rootTC.componentInstance.form = new ControlGroup({"text": new Control("old")});
             rootTC.detectChanges();
             var input = rootTC.query(By.css("input"));
             expect(input.nativeElement.value).toEqual("old");

             input.nativeElement.value = "new";
             dispatchEvent(input.nativeElement, "input");

             expect(rootTC.componentInstance.form.value).toEqual({"text": "new"});
             async.done();
           });
         }));

      it("should support <textarea>",
         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
           var t = `<div [ng-form-model]="form">
                  <textarea ng-control="text"></textarea>
                </div>`;

           tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((rootTC) => {
             rootTC.componentInstance.form = new ControlGroup({"text": new Control('old')});
             rootTC.detectChanges();

             var textarea = rootTC.query(By.css("textarea"));
             expect(textarea.nativeElement.value).toEqual("old");

             textarea.nativeElement.value = "new";
             dispatchEvent(textarea.nativeElement, "input");

             expect(rootTC.componentInstance.form.value).toEqual({"text": 'new'});
             async.done();
           });
         }));

      it("should support <type=checkbox>",
         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
           var t = `<div [ng-form-model]="form">
                  <input type="checkbox" ng-control="checkbox">
                </div>`;

           tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((rootTC) => {
             rootTC.componentInstance.form = new ControlGroup({"checkbox": new Control(true)});
             rootTC.detectChanges();

             var input = rootTC.query(By.css("input"));
             expect(input.nativeElement.checked).toBe(true);

             input.nativeElement.checked = false;
             dispatchEvent(input.nativeElement, "change");

             expect(rootTC.componentInstance.form.value).toEqual({"checkbox": false});
             async.done();
           });
         }));

      it("should support <select>",
         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
           var t = `<div [ng-form-model]="form">
                    <select ng-control="city">
                      <option value="SF"></option>
                      <option value="NYC"></option>
                    </select>
                  </div>`;

           tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((rootTC) => {
             rootTC.componentInstance.form = new ControlGroup({"city": new Control("SF")});
             rootTC.detectChanges();

             var select = rootTC.query(By.css("select"));
             var sfOption = rootTC.query(By.css("option"));
             expect(select.nativeElement.value).toEqual('SF');
             expect(sfOption.nativeElement.selected).toBe(true);

             select.nativeElement.value = 'NYC';
             dispatchEvent(select.nativeElement, "change");

             expect(rootTC.componentInstance.form.value).toEqual({"city": 'NYC'});
             expect(sfOption.nativeElement.selected).toBe(false);
             async.done();
           });
         }));

      it("should support <select> with a dynamic list of options",
         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
           var t = `<div [ng-form-model]="form">
                      <select ng-control="city">
                        <option *ng-for="#c of data" [value]="c"></option>
                      </select>
                  </div>`;

           tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((rootTC) => {
             rootTC.componentInstance.form = new ControlGroup({"city": new Control("NYC")});
             rootTC.componentInstance.data = ['SF', 'NYC'];
             rootTC.detectChanges();

             var select = rootTC.query(By.css('select'));
             expect(select.nativeElement.value).toEqual('NYC');
             async.done();
           });
         }));

      it("should support custom value accessors",
         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
           var t = `<div [ng-form-model]="form">
                  <input type="text" ng-control="name" wrapped-value>
                </div>`;

           tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((rootTC) => {
             rootTC.componentInstance.form = new ControlGroup({"name": new Control("aa")});
             rootTC.detectChanges();
             var input = rootTC.query(By.css("input"));
             expect(input.nativeElement.value).toEqual("!aa!");

             input.nativeElement.value = "!bb!";
             dispatchEvent(input.nativeElement, "change");

             expect(rootTC.componentInstance.form.value).toEqual({"name": "bb"});
             async.done();
           });
         }));
    });

    describe("validations", () => {
      it("should use validators defined in html",
         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
           var form = new ControlGroup({"login": new Control("aa")});

           var t = `<div [ng-form-model]="form">
                  <input type="text" ng-control="login" required>
                 </div>`;

           tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((rootTC) => {
             rootTC.componentInstance.form = form;
             rootTC.detectChanges();
             expect(form.valid).toEqual(true);

             var input = rootTC.query(By.css("input"));

             input.nativeElement.value = "";
             dispatchEvent(input.nativeElement, "change");

             expect(form.valid).toEqual(false);
             async.done();
           });
         }));

      it("should use validators defined in the model",
         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
           var form = new ControlGroup({"login": new Control("aa", Validators.required)});

           var t = `<div [ng-form-model]="form">
                  <input type="text" ng-control="login">
                 </div>`;

           tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((rootTC) => {
             rootTC.componentInstance.form = form;
             rootTC.detectChanges();
             expect(form.valid).toEqual(true);

             var input = rootTC.query(By.css("input"));

             input.nativeElement.value = "";
             dispatchEvent(input.nativeElement, "change");

             expect(form.valid).toEqual(false);
             async.done();
           });
         }));
    });

    describe("nested forms", () => {
      it("should init DOM with the given form object",
         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
           var form =
               new ControlGroup({"nested": new ControlGroup({"login": new Control("value")})});

           var t = `<div [ng-form-model]="form">
                  <div ng-control-group="nested">
                    <input type="text" ng-control="login">
                  </div>
              </div>`;

           tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((rootTC) => {
             rootTC.componentInstance.form = form;
             rootTC.detectChanges();

             var input = rootTC.query(By.css("input"));
             expect(input.nativeElement.value).toEqual("value");
             async.done();
           });
         }));

      it("should update the control group values on DOM change",
         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
           var form =
               new ControlGroup({"nested": new ControlGroup({"login": new Control("value")})});

           var t = `<div [ng-form-model]="form">
                    <div ng-control-group="nested">
                      <input type="text" ng-control="login">
                    </div>
                </div>`;

           tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((rootTC) => {
             rootTC.componentInstance.form = form;
             rootTC.detectChanges();
             var input = rootTC.query(By.css("input"));

             input.nativeElement.value = "updatedValue";
             dispatchEvent(input.nativeElement, "change");

             expect(form.value).toEqual({"nested": {"login": "updatedValue"}});
             async.done();
           });
         }));
    });

    it("should support ng-model for complex forms",
       inject(
           [TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => {
             var form = new ControlGroup({"name": new Control("")});

             var t =
                 `<div [ng-form-model]="form"><input type="text" ng-control="name" [(ng-model)]="name"></div>`;

             var rootTC;
             tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((root) => { rootTC = root; });
             tick();

             rootTC.componentInstance.name = 'oldValue';
             rootTC.componentInstance.form = form;
             rootTC.detectChanges();

             var input = rootTC.query(By.css("input")).nativeElement;
             expect(input.value).toEqual("oldValue");

             input.value = "updatedValue";
             dispatchEvent(input, "change");

             tick();
             expect(rootTC.componentInstance.name).toEqual("updatedValue");
           })));

    it("should support ng-model for single fields",
       inject(
           [TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => {
             var form = new Control("");

             var t = `<div><input type="text" [ng-form-control]="form" [(ng-model)]="name"></div>`;

             var rootTC;
             tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((root) => { rootTC = root; });
             tick();
             rootTC.componentInstance.form = form;
             rootTC.componentInstance.name = "oldValue";
             rootTC.detectChanges();

             var input = rootTC.query(By.css("input")).nativeElement;
             expect(input.value).toEqual("oldValue");

             input.value = "updatedValue";
             dispatchEvent(input, "change");
             tick();

             expect(rootTC.componentInstance.name).toEqual("updatedValue");
           })));

    describe("template-driven forms", () => {
      it("should add new controls and control groups",
         inject([TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => {
                  var t = `<form>
                     <div ng-control-group="user">
                      <input type="text" ng-control="login">
                     </div>
               </form>`;

                  var rootTC;
                  tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then(
                      (root) => { rootTC = root; });
                  tick();
                  rootTC.componentInstance.name = null;
                  rootTC.detectChanges();

                  var form = rootTC.componentViewChildren[0].inject(NgForm);
                  expect(form.controls['user']).not.toBeDefined();

                  tick();

                  expect(form.controls['user']).toBeDefined();
                  expect(form.controls['user'].controls['login']).toBeDefined();
                })));

      it("should emit ng-submit event on submit",
         inject([TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => {
                  var t = `<div><form (ng-submit)="name='updated'"></form></div>`;

                  var rootTC;
                  tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then(
                      (root) => { rootTC = root; });
                  tick();
                  rootTC.componentInstance.name = 'old';
                  var form = rootTC.query(By.css("form"));

                  dispatchEvent(form.nativeElement, "submit");
                  tick();

                  expect(rootTC.componentInstance.name).toEqual("updated");
                })));

      it("should not create a template-driven form when ng-no-form is used",
         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
           var t = `<form ng-no-form>
               </form>`;

           tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((rootTC) => {
             rootTC.componentInstance.name = null;
             rootTC.detectChanges();

             expect(rootTC.componentViewChildren.length).toEqual(0);
             async.done();
           });
         }));

      it("should remove controls",
         inject([TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => {
                  var t = `<form>
                    <div *ng-if="name == 'show'">
                      <input type="text" ng-control="login">
                    </div>
                  </form>`;

                  var rootTC;
                  tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then(
                      (root) => { rootTC = root; });
                  tick();
                  rootTC.componentInstance.name = 'show';
                  rootTC.detectChanges();
                  tick();
                  var form = rootTC.componentViewChildren[0].inject(NgForm);


                  expect(form.controls['login']).toBeDefined();

                  rootTC.componentInstance.name = 'hide';
                  rootTC.detectChanges();
                  tick();

                  expect(form.controls['login']).not.toBeDefined();
                })));

      it("should remove control groups",
         inject([TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => {
                  var t = `<form>
                     <div *ng-if="name=='show'" ng-control-group="user">
                      <input type="text" ng-control="login">
                     </div>
               </form>`;


                  var rootTC;
                  tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then(
                      (root) => { rootTC = root; });
                  tick();
                  rootTC.componentInstance.name = 'show';
                  rootTC.detectChanges();
                  tick();
                  var form = rootTC.componentViewChildren[0].inject(NgForm);

                  expect(form.controls['user']).toBeDefined();

                  rootTC.componentInstance.name = 'hide';
                  rootTC.detectChanges();
                  tick();

                  expect(form.controls['user']).not.toBeDefined();
                })));

      it("should support ng-model for complex forms",
         inject([TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => {
                  var t = `<form>
                      <input type="text" ng-control="name" [(ng-model)]="name">
               </form>`;

                  var rootTC;
                  tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then(
                      (root) => { rootTC = root; });
                  tick();
                  rootTC.componentInstance.name = "oldValue";
                  rootTC.detectChanges();
                  tick();

                  var input = rootTC.query(By.css("input")).nativeElement;
                  expect(input.value).toEqual("oldValue");

                  input.value = "updatedValue";
                  dispatchEvent(input, "change");
                  tick();

                  expect(rootTC.componentInstance.name).toEqual("updatedValue");
                })));


      it("should support ng-model for single fields",
         inject([TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => {
                  var t = `<div><input type="text" [(ng-model)]="name"></div>`;

                  var rootTC;
                  tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then(
                      (root) => { rootTC = root; });
                  tick();
                  rootTC.componentInstance.name = "oldValue";
                  rootTC.detectChanges();

                  var input = rootTC.query(By.css("input")).nativeElement;
                  expect(input.value).toEqual("oldValue");

                  input.value = "updatedValue";
                  dispatchEvent(input, "change");
                  tick();

                  expect(rootTC.componentInstance.name).toEqual("updatedValue");
                })));
    });


    describe("setting status classes", () => {
      it("should work with single fields",
         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
           var form = new Control("", Validators.required);

           var t = `<div><input type="text" [ng-form-control]="form"></div>`;

           tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((rootTC) => {
             rootTC.componentInstance.form = form;
             rootTC.detectChanges();

             var input = rootTC.query(By.css("input")).nativeElement;
             expect(DOM.classList(input))
                 .toEqual(['ng-binding', 'ng-untouched', 'ng-pristine', 'ng-invalid']);

             dispatchEvent(input, "blur");
             rootTC.detectChanges();

             expect(DOM.classList(input))
                 .toEqual(["ng-binding", "ng-pristine", "ng-invalid", "ng-touched"]);

             input.value = "updatedValue";
             dispatchEvent(input, "change");
             rootTC.detectChanges();

             expect(DOM.classList(input))
                 .toEqual(["ng-binding", "ng-touched", "ng-dirty", "ng-valid"]);
             async.done();
           });
         }));

      it("should work with complex model-driven forms",
         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
           var form = new ControlGroup({"name": new Control("", Validators.required)});

           var t = `<form [ng-form-model]="form"><input type="text" ng-control="name"></form>`;

           tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((rootTC) => {
             rootTC.componentInstance.form = form;
             rootTC.detectChanges();

             var input = rootTC.query(By.css("input")).nativeElement;
             expect(DOM.classList(input))
                 .toEqual(["ng-binding", "ng-untouched", "ng-pristine", "ng-invalid"]);

             dispatchEvent(input, "blur");
             rootTC.detectChanges();

             expect(DOM.classList(input))
                 .toEqual(["ng-binding", "ng-pristine", "ng-invalid", "ng-touched"]);

             input.value = "updatedValue";
             dispatchEvent(input, "change");
             rootTC.detectChanges();

             expect(DOM.classList(input))
                 .toEqual(["ng-binding", "ng-touched", "ng-dirty", "ng-valid"]);
             async.done();
           });
         }));

      it("should work with ng-model",
         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
           var t = `<div><input [(ng-model)]="name" required></div>`;

           tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((rootTC) => {
             rootTC.componentInstance.name = "";
             rootTC.detectChanges();

             var input = rootTC.query(By.css("input")).nativeElement;
             expect(DOM.classList(input))
                 .toEqual(["ng-binding", "ng-untouched", "ng-pristine", "ng-invalid"]);

             dispatchEvent(input, "blur");
             rootTC.detectChanges();

             expect(DOM.classList(input))
                 .toEqual(["ng-binding", "ng-pristine", "ng-invalid", "ng-touched"]);

             input.value = "updatedValue";
             dispatchEvent(input, "change");
             rootTC.detectChanges();

             expect(DOM.classList(input))
                 .toEqual(["ng-binding", "ng-touched", "ng-dirty", "ng-valid"]);
             async.done();
           });
         }));
    });
  });
}

@Directive({
  selector: '[wrapped-value]',
  host: {'(change)': 'handleOnChange($event.target.value)', '[value]': 'value'}
})
class WrappedValue implements ControlValueAccessor {
  value;
  onChange: Function;

  constructor(cd: NgControl) { cd.valueAccessor = this; }

  writeValue(value) { this.value = `!${value}!`; }

  registerOnChange(fn) { this.onChange = fn; }
  registerOnTouched(fn) {}

  handleOnChange(value) { this.onChange(value.substring(1, value.length - 1)); }
}

@Component({selector: "my-comp"})
@View({directives: [formDirectives, WrappedValue, NgIf, NgFor]})
class MyComp {
  form: any;
  name: string;
  data: any;
}