How to bind FormGroup properties to my child component in Angular 13?-CodePudding

I have been solving this problem for 3 days now and can't seem to find a solution. I also tried to use ChatGPT and reading Angular documentation but no luck.

Here is a stackblits link: https://stackblitz.com/edit/angular-ivy-rdwj1n?file=src/app/users-profile/users-profile.component.html

basically, I have a FormGroup in my parent component that I initialized with default values outside my constructor:

  formUsersInformation: FormGroup = this.formBuilder.group({

    profile: this.formBuilder.group({
      firstname: new FormControl('', [Validators.required, Validators.minLength(2)]),
      middlename: new FormControl('', [Validators.required, Validators.minLength(2)]),
      lastname: new FormControl('', [Validators.required, Validators.minLength(2)]),
      birthdate: new FormControl('', [Validators.required]),
      civilstatus: new FormControl('', [Validators.required, Validators.minLength(2)]),
      emailaddress: new FormControl('', [Validators.required, Validators.email]),
      phonenumber: new FormControl('', [Validators.required, Validators.pattern('^[0-9] $')])
    }),


    addresses: this.formBuilder.array([
      this.formBuilder.group({
        idtype: new FormControl('', [Validators.required]),
        idnumber: new FormControl('', [Validators.required]),
        idexpiration: new FormControl('', [Validators.required]),
        idfile: new FormControl('', [Validators.required]),
      })
    ]),



    identifications: this.formBuilder.array([
      this.formBuilder.group({
        street: new FormControl('', [Validators.required]),
        city: new FormControl('', [Validators.required]),
        state: new FormControl('', [Validators.required]),
        zipcode: new FormControl('', [Validators.required])
      })
    ]),

  });

then in my parent HTML I have this:

<app-users-profile 
      [formUsersProfile]="formUsersInformation" 
      (FormActionEvent)="formsAction($event)" 
      *ngIf="isUsersProfileVisible">
</app-users-profile>

In my Child Component I named it UsersProfileComponent I have an @Input() decorator outside my constructor:

@Input() formUsersProfile: FormGroup = new FormGroup({});

And what I want to do is to bind formUsersInformation profile property in my HTML. This is my html form:

<div  [formGroup]="formUsersProfile">

        <div >
            <label for="firstname" >First Name</label>
            <input type="text"   formControlName="firstname"  id="firstname">
        </div>
</div>

but it says: ERROR Error: Cannot find control with name: 'firstname'

Also I also need to bind the other properties to my other child component such as addresses (which is an array) for UsersAddressComponent and identifications for my UsersIdentificationComponent which is also an array.

Thank you very much!

CodePudding user response：

Here is a solution to your question.
https://stackblitz.com/edit/angular-ivy-gv4pnw?file=src/app/app.component.html

What you need is to use the right combination of formGroupName, formControlName and formArrayName directives. Here is the markup of resulting child component:

<div  [formGroup]="formGroup">
  <ng-container formGroupName="profile">
    <div >
      <label for="firstname" >First Name</label>
      <input
        type="text"
        
        formControlName="firstname"
        id="firstname"
      />
    </div>
  </ng-container>
  <p>Addresses</p>
  <ul formArrayName="addresses">
    <li *ngFor="let address of addresses.controls; let i = index">
      <div  [formGroupName]="i">
        <label for="idtype" >ID type</label>
        <input
          type="text"
          
          formControlName="idtype"
          id="idtype"
        />
      </div>
    </li>
    <button type="button" (click)="addAddress.emit()">
        Add another address
    </button>
  </ul>
</div>

Everything for this question I got from reactive forms doc https://angular.io/guide/reactive-forms

CodePudding user response：

Just create a service, "FormControllerService" then use it across your project, you can get the form value anywhere the service is called and you can set child component variables with your FormGroup in service