CODEWITHSUNDEEP
angular
simon
simon

Reputation: 101

angular2 forms validation error message

i am new in angular2 and i want to make a form to insert data my problem is when i click create it shows "browser sync disconnected" also initially the two fields name and adress show the values i gave them but postcode doesn't.and finally there is an error Error: "Cannot find control with path: 'adress -> adress' here is my code component.html

    <div class="container">
<h3>Add user:</h3>
<form [formGroup]="myForm" novalidate (ngSubmit)="Create(myForm.value, myForm.valid)">
<ul>
   <div class="form-group">
       <label for="name">name:</label> <input type="text" class="form-control" formControlName="name"><br/><small [hidden]="myForm.controls.name.valid || (myForm.controls.name.pristine && !submitted)" class="text-danger">
        name is required.
          </small>
             </div>

 <div class="form-group" formGroupName="adress">
      <label for="">adress</label>
      <input type="text" class="form-control" formControlName="street">
      <small [hidden]="myForm.controls.adress.controls.street.valid || (myForm.controls.adress.controls.street.pristine && !submitted)" class="text-danger">
            street required
          </small>


<div class="form-group" formGroupName="adress">
      <label for="">postcode</label>
      <input type="text" class="form-control" formControlName="postcode">
    </div>

<button  class="btn btn-default" (click)="CreateVersion()">create</button> 
       </div>

   </ul>
   </form>
   </div>

component.ts

    import { Component ,OnInit} from '@angular/core';
import {Service} from '../services/service.component';
import { FormsModule,FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms';
import {Observable} from 'rxjs/Rx';
import { User } from './user.interface';


@Component({
moduleId: module.id,
selector: 'version',
templateUrl:'./version.component.html',
styleUrls:['./version.component.css']
})

export class VersionComponent implements OnInit{

public myForm: FormGroup;


constructor(){};

    ngOnInit() {

        this.myForm = new FormGroup({
          name: new FormControl('', [<any>Validators.required, <any>Validators.minLength(5)]),
          adress: new FormGroup({
                street: new FormControl('', <any>Validators.required),
                 postcode     : new FormControl('')
            })
      });

     const people = {
                name: 'Jae',
                adress: {
                street: 'High street',
                postcode: '94043'
            }
         };

         (<FormGroup>this.myForm)
             .setValue(people, { onlySelf: true });
}
  Create(conf: User, isValid: boolean) {
        this.submitted = true;
        console.log(model, isValid);
    }
}

user

export interface User {
 name: string;
  adress?: {
  street?: string;
  postcode?: string;
   }
  }

Upvotes: 0

Views: 1297

Answers (1)

Joe Keene
Joe Keene

Reputation: 2351

I think it's because you have wrapped your postcode with formGroupName twice so your html should be like this :-

<div class="container">
    <h3>Add user:</h3>
    <form [formGroup]="myForm" novalidate (ngSubmit)="Create(myForm.value, myForm.valid)">
        <ul>
            <div class="form-group">
                <label for="name">name:</label> <input type="text" class="form-control" formControlName="name"><br/>
                <small [hidden]="myForm.controls.name.valid || (myForm.controls.name.pristine && !submitted)"
                       class="text-danger">
                    name is required.
                </small>
            </div>

            <div class="form-group" formGroupName="adress">
                <label for="">adress</label>
                <input type="text" class="form-control" formControlName="street">
                <small [hidden]="myForm.controls.adress.controls.street.valid || (myForm.controls.adress.controls.street.pristine && !submitted)"
                       class="text-danger">
                    street required
                </small>

                <label for="">postcode</label>
                <input type="text" class="form-control" formControlName="postcode">

                <button class="btn btn-default" (click)="CreateVersion()">create</button>
            </div>

        </ul>
    </form>
</div>

Upvotes: 2

Related Questions