Angular 2 Reactive Forms: Cannot find control with path

Question

I try to dynamically add Roles to my User/Roles-application. I have a Formarray where i can show the Roles of the User in the Edit View. And there is a button for adding more Roles to the User. But when i press the button "Add Role", i got this error message:

ERROR Error: Cannot find control with path: 'rolesArr -> 1 -> name'

In this example, i try to add more than one Role to a User that i want to create.

Here is my Code:

users-edit.component.html (excerpt)

<div formArrayName="rolesArr" >
<div class="row">
    <div class="col-md-10 col-md-offset-2">
        <button class="btn btn-default"
                type="button"
                (click)="addRole()">Add Role
        </button>
    </div>
</div>
<br>
<div *ngFor="let role of roles.controls; let i=index">
    <div [formGroupName]="i">

        <div class="form-group">
            <label class="col-md-2 control-label" [attr.for]="i">Role</label>

            <div class="col-md-8">
                <input class="form-control"
                        [id]="i" 
                        type="text" 
                        placeholder="Role" 
                        formControlName="name" />
            </div>
        </div>
    </div>
</div>

users-edit.component.ts (excerpt)

addRole() {
    this.roles.push(this.fb.group(new Roles()));
}

ngOnInit(): void {

    this.userForm = this.fb.group({
        username: ['', [Validators.required, Validators.minLength(3)]],
        firstname: ['', [Validators.required, Validators.minLength(3)]],
        lastname: ['', [Validators.required, Validators.minLength(3)]],
        password: ['', [Validators.required, Validators.minLength(10)]],
        rolesArr: this.fb.array([])
    });

    this.sub = this.activeRoute.params.subscribe(
        params => {
            let id = +params['id']; //converts string'id' to a number
            this.getUser(id);
        }
    );
}
getUser(id: number) {
        this.userService.getUser(id).subscribe(
                user => this.onUserRetrieved(user)
            );
}
onUserRetrieved(user: User): void {
    console.log("OnUserRetrieved: " + user.firstname);
    if (this.userForm) {
        this.userForm.reset();
    }
    this.users = user;

    if (this.users.id === 0) {
        this.pageTitle = 'Add User';
    } else {
        this.pageTitle = `Edit User: ${this.users.username}`;
    }

    //Update the data on the form
    this.userForm.patchValue({
        username: this.users.username,
        firstname: this.users.firstname,
        lastname: this.users.lastname,
        password: this.users.password
    });

    const roleFGs = this.users.roles.map(roles => this.fb.group(roles));
    const roleFormArray = this.fb.array(roleFGs);
    this.userForm.setControl('rolesArr', roleFormArray);
}

What am i doing wrong?

Aravind · Accepted Answer · 2017-05-27 18:54:10Z

2

You should create a form group with the controls for Roles as below,

createRole() :  FormGroup {
    return this.fb.group({
            name: '',
            type: '',

    });
}

Then you should push the role as below,

addRole() {
    this.roles.push(this.createRole());
}

edited May 27, 2017 at 18:54

answered May 27, 2017 at 18:33

Aravind

41.7k16 gold badges97 silver badges111 bronze badges

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

3 Comments

Beytullah Güneyli Over a year ago

thank you man! i knew it was so easy. but didnt know what the problem is. it works perfect now

Aravind Over a year ago

happy to help you. anything else you need?

Beytullah Güneyli Over a year ago

now i really could use your help. If you don't mind, can you please have a look on my issue posted here ?

Florian K · Accepted Answer · 2018-04-30 13:05:17Z

1

While Aravind's answer works you are still able to do the exact same thing you are doing now:

addRole() {
    this.roles.push(this.fb.group(new Roles()));
}

but the control requires default values for your properties in the class (which is exactly what Aravind's solution does, it creates an object with default values)

so if your current Roles class looks something like this:

export class Roles {
    public name: string;
    public type: string;
}

you should add default values like this:

export class Roles {
    public name: string = '';
    public type: string = '';
}

This allows angular to find your properties as control's

Additional information: https://angular.io/guide/reactive-forms#use-formarray-to-present-an-array-of-formgroups

answered Apr 30, 2018 at 13:05

Florian K

62210 silver badges31 bronze badges

1 Comment

red_dorian Over a year ago

You are a legend! After hours of searching and refactoring this is what has finally fixed my "Cannot find control with path" error! Thank you!

Collectives™ on Stack Overflow

Angular 2 Reactive Forms: Cannot find control with path

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related