angular2 forms validation error message

Question

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;
   }
  }

this is only part of the code, I can't see where the page is reloaded. — Roman C
– Roman C, Commented Apr 27, 2017 at 14:10
ok thank you very much for your help :) i'll check maybe there is a mistake in other components — simon
– simon, Commented Apr 27, 2017 at 14:13

Joe Keene · Accepted Answer · 2017-04-27 14:03:58Z

2

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>

answered Apr 27, 2017 at 14:03

Joe Keene

2,36124 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

simon Over a year ago

ok so the postcode is now shown but it is the same when i click create it reloads the page and "browser sync disconnected" is displayed

Joe Keene Over a year ago

Great, how are you running the site - with gulp or lite server or something like that?

simon Over a year ago

i am using express server

Joe Keene Over a year ago

Ok, can you show me the function that the button calls CreateVersion() can't see it in your code?

simon Over a year ago

sorry i was mistaking the names really sorry i just called a function that is not defined that's why (spending 6 hours coding )

|

Collectives™ on Stack Overflow

angular2 forms validation error message

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related