Nested form in child component without FormGroup

Question

I want to be able to reuse part of my form elsewhere, so I wanted to separate it into it's own component. I still want to submit the form through the parent component - no button or anything in the child. I also don't want to use FormGroup if I can help it. Is this possible?

This is what I am trying to make work:

<parent>
  <form #f="ngForm" (ngSubmit)="onSubmit(f)" id="f">
    <child></child>
    <input type="checkbox" id="terms" #terms="ngModel" ngModel name="terms"> 
    <input type="submit" id="btnSubmit">
  </form>
</parent>

Ideally the child would return an object with the form information like so (if this is impossible but something else can be done that's ok too):

@Component({
   selector: 'child', 
   ...
})
export class ChildComponent implements OnInit {
  ...
  createObject(form:NgForm) {
    let user = new userProfile(); 
    user.email = form.controls["email"].value;
    user.username = form.controls["username"].value;
    ...
    return user;
  }
}

Cp Gowtham · Accepted Answer · 2024-08-09 16:59:02Z

1

Use @ViewChild in the parent to call a method in the child that extracts form data.

Reference: https://angular.dev/api/core/ViewChild

answered Aug 9, 2024 at 16:59

Cp Gowtham

3611 silver badge7 bronze badges

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

Collectives™ on Stack Overflow

Nested form in child component without FormGroup

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related