[Angular2 Form] Nested Formgroup, and usage of formgroupname

We can nest Formgorup:

    this. Reactiveform = fb.group ({      username: [        '],        [          validators.required,          validators.minlength (3)        ]      ,      pwds:fb.group ({         "' ,         "'       }, {validator:passwordvalidator})    });

We make password as an own group. So in HTML, we need to use formgroupname istead of Formcontrolname.

<form[Formgroup]= "Reactiveform"novalidate AutoComplete= "Off">  <Divclass= "Form-field">    <label>Username:</label>    <inputFormcontrolname= "username">    <Divclass= "Field-error-message"*ngif= "ReactiveForm.controls.title.errors?". Required ">Username is required</Div>  </Div>  <DivFormgroupname= "PWDs">    <Divclass= "Form-field">      <label>Pwd</label>      <inputFormcontrolname= "pwd">    </Div>    <Divclass= "Form-field">      <label>Rpwd</label>      <inputFormcontrolname= "Rpwd">    </Div>  </Div></form>

And how do we check the value or errors?:

< Pre >   {{reactiveform.get (' PWDs ')?. Value | JSON}}  {{reactiveform.get (' PWDs ')?. Errors | JSON}}</pre>

And we also Passwordvalidator Haven ' t cover yet, it is just a fucntion:

function Passwordvalidator (c:abstractcontrol) {  return c.get('pwd  '). Value = = c.Get('rpwd'). Value?    NULL // valid    // Invalid      true     }}

And notice that we put this validator inside the nested group, so we can get nice error effect:

[Angular2 Form] Nested formgroup, and usage of formgroupname