Angular2 Form Validation Inside Component

Question

I need to add a model drive form validation to my custom input component. I'm not sure how to implement it passing ngControl to my component.

In my plunkr example http://plnkr.co/edit/QTmxl8ij5Z6E3xKh45hI?p=preview there are first two input tags which are working and then there is the my-form-input which should do the same thing as the first two inputs, but using a custom component

      <form [ngFormModel]="loginForm">
        <p>
          <input type="text" ngControl="usernameX" required placeholder="usernameX" /><br>
          valid {{usernameX.valid}}
        </p>
        <p>
          <input type="text" ngControl="passwordX" required placeholder="passwordX"/><br>
          valid {{passwordX.valid}}
        </p>

        <my-form-input [placeholder]="'usernameXX'" [required]="true" [control]="usernameXX"></my-form-input><br>
        valid {{usernameXX.valid}}

        <p>form is valid: {{loginForm.valid}}</p>
      </form>

here is only a idea of my component

@Component({
  selector: 'my-form-input',
  directives: [ FORM_DIRECTIVES ],
  template: `
    <div>
      <p>
        <input type="text" [attr.placeholder]="placeholder" [attr.required]="required" [attr.ngControl]="control"/><br>
        valid {{control.valid}}
      </p>
    </div>
  `
})
export class InputComponent implements OnInit {

  @Input() placeholder: string;
  @Input() required: boolean;
  @Input() control: Control;

thx

score 1 · Answer 1 · edited May 23 '17 at 10:30

Angular2 FORM with controls and validation.

After a lot searching i concluded that using ngModel is best to get values from form. by using same it is easier to clear to controls of the forms. and validations gets easy. and used ngControl for checking validations.

here is my working code for the form.

<form class="form-horizontal" id='myForm' role="form" [ngFormModel]="CreateGroup">

  <div class="col-md-7">
    Name: <input type="text" [(ngModel)]='demoInfo.name' class="form-control" ngControl='name'>
  </div>

  <div class="col-md-7">
    Password:   <input type="password" [(ngModel)]='demoInfo.password' class="form-control" ngControl='password'>
  </div>

  <div class="col-md-7">
    <input type="radio" name='type' (click)='demoInfo.radio="Btech"' [checked]="'Btech' === demoInfo.radio">Btech
    <input type="radio" name='type' (click)='demoInfo.radio="Mtech"' [checked]="'Mtech' === demoInfo.radio">Mtech
  </div>

  <div class="col-md-7">
    <select #selectOption (change)='demoInfo.select=selectOption.value' class='form-control' ngControl='select'>
      <option> select</option>
      <option value='One' [selected]="demoInfo.select==='One'">One Value</option>
      <option value='Two' [selected]="demoInfo.select==='Two'">two Value</option>
      <option value='Three' [selected]="demoInfo.select==='Three'">Three Value</option>
    </select>
  </div>
</form>
<br>
<div class='text-center'>
  <button type="button" [disabled]='!CreateGroup.valid' (click)="addNewGroup(demoInfo)" class="btn btn-primary">Create</button>
</div>

and code for the class side is here...

import {Component} from 'angular2/core';
import {CORE_DIRECTIVES, NgClass, FORM_DIRECTIVES, Control, ControlGroup, FormBuilder, Validators} from 'angular2/common';

class DemoInfo{
  name:string;
  password: string;
  radio: any;
  select: any;
}
@Component({
    selector: 'my-app',
    templateUrl: 'mytemplate.html',
    directives: [CORE_DIRECTIVES, FORM_DIRECTIVES] 
})
export class AppComponent { 
  CreateGroup: FormBuilder;
  demoInfo: DemoInfo;
  constructor(fb: FormBuilder){
    this.demoInfo= new DemoInfo(); 

    this.CreateGroup = fb.group({
            'name': new Control(this.demoInfo.name, Validators.required),
            'password': new Control(this.demoInfo.password, Validators.required),
            'select': new Control(this.demoInfo.select, Validators.required)
        })
  }
  addNewGroup(demoInfo:demoInfo) {
    console.log(demoInfo, 'whole object');
    this.demoInfo= new DemoInfo();
  }
}

refer this for working plunkr here .

For more details refer here

Forms In angular2 Beta

hi, that's exactly the same thing I do on my example! My problem is, how to I pass ngControl to input if the input is wrapped by an other component, in my case — Michael Burger, Apr 08 '16 at 09:00

Angular2 Form Validation Inside Component

1 Answers1

Angular2 FORM with controls and validation.