31

I have a form with 2 FromGroups (User & Address)

I get the following error:

 core.es5.js:1084 ERROR Error: Uncaught (in promise): Error: Cannot find control with name: 'street'

when I use this class

export class FormBuilderComp {
        addUserFrom: FormGroup;
        constructor( @Inject(FormBuilder) fb: FormBuilder) {
            this.addUserFrom = fb.group({
                userGroup: fb.group({
                    name: ['', Validators.required],
                    email: ['', Validators.required],
                    phone: ['', Validators.required]
                }),
                addressGroup: fb.group({
                    street: ['', Validators.required],
                    suite: ['', Validators.required],
                    city: ['', Validators.required],
                    zipCode: ['', Validators.required]
                })
            });
        }
    }

...But if I take out one of the nested FormGroups as in

  export class FormBuilderComp {
        addUserFrom: FormGroup;
        constructor( @Inject(FormBuilder) fb: FormBuilder) {
            this.addUserFrom = fb.group({
                userGroup: fb.group({
                    name: ['', Validators.required],
                    email: ['', Validators.required],
                    phone: ['', Validators.required]
                }),
                street: ['', Validators.required],
                suite: ['', Validators.required],
                city: ['', Validators.required],
                zipCode: ['', Validators.required]

            });
        }
    }

The error disappears.

Is there some rule about not having more than one nested FromGroup??

Here's the html in case it's relevant

 <form [formGroup]="addUserFrom">
        <fieldset formGroupName="userGroup">
                <legend>User</legend>
            <div class="form-group">
                <label for="name">Name</label>
                <input 
                    type="text" 
                    class="form-control" 
                    id="name" 
                    formControlName="name">
            </div>
            <div class="form-group">
                <label for="email">Email</label>
                <input 
                    type="text" 
                    class="form-control" 
                    id="email" 
                    formControlName="email">
            </div>
            <div class="form-group">
                <label for="phone">Phone</label>
                <input 
                    type="text" 
                    class="form-control" 
                    id="phone" 
                    formControlName="phone">
            </div>
        </fieldset>
        <fieldset fromGroupName="addressGroup">
            <legend>Address</legend>
        <div class="form-group">
                <label for="street">Street</label>
                <input 
                    type="text" 
                    class="form-control" 
                    id="street" 
                    formControlName="street">
            </div>
            <div class="form-group">
                <label for="suite">Suite</label>
                <input 
                    type="text" 
                    class="form-control" 
                    id="suite" 
                    formControlName="suite">
            </div>
            <div class="form-group">
                <label for="city">City</label>
                <input 
                    type="text" 
                    class="form-control" 
                    id="city" 
                    formControlName="city">
            </div>
            <div class="form-group">
                <label for="zipCode">Zip Code</label>
                <input 
                    type="text" 
                    class="form-control" 
                    id="zipCode" 
                    formControlName="zipCode">
            </div>
        </fieldset>

        <button>Submit</button>
    </form>
2
  • don't you also need to make the individual fields formControls? Commented Apr 19, 2017 at 21:15
  • @danimal as far as I know the array format is the same as formBuilder.control() Commented Apr 19, 2017 at 22:15

1 Answer 1

31

There is typo in your html, change fromGroupName to formGroupName.

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

1 Comment

it's funny I had the same problem. Simple mistake. Thanks.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.