@Input form child component

Question

I am trying to separate the code responsible for the form into another component, and make it reusable. I guess i should use @Input somehow. Then referr it in html. And pass values from it to post method. But how can i do it?

Backend, form and method worked fine when code were in same .ts. Im using Angular11.2.2

Here is my code:

**camel-form.component.ts **

camelForm = this.formBuilder.group({
    id: [],
    name: [''],
    age: [],
    guardian: this.formBuilder.group({
      id: [],
      name: [''],
      lastName: [''],
      email: ['']
    })
  });

**camel-form.component.html **

<form [formGroup]="camelForm">
  <!--    part for camel-->
  <h2 class="ml-3">Camel form</h2>
  <div class="form-row ml-3">
    <div class="form-group col-md-2">
      <label  for="id">id </label>
      <input class="form-control" id="id" type="number" formControlName="id">
    </div>
    <div class="form-group col-md-2">
      <label for="name">name </label>
      <input class="form-control" id="name" type="text" formControlName="name">
    </div>
    <div class="form-group col-md-2">
      <label for="age">age </label>
      <input class="form-control" id="age" type="number" formControlName="age">
    </div>
  </div>

  <!--    part for guardian-->
  <h2 class="ml-3">Guardian form</h2>
  <div class="form-row ml-3" formGroupName="guardian">

    <div class="form-group col-md-2">
      <label for="id">id </label>
      <input class="form-control" id="id" type="number" formControlName="id">
    </div>

    <div class="form-group col-md-2">
      <label for="name">name </label>
      <input class="form-control" id="name" type="text" formControlName="name">
    </div>

    <div class="form-group col-md-2">
      <label for="lastName">lastName</label>
      <input class="form-control" id="lastName" type="text" formControlName="lastName">
    </div>

    <div class="form-group col-md-2">
      <label for="email">email</label>
      <input class="form-control" id="email" type="email" formControlName="email">
    </div>
  </div>
</form>

**rest.component.ts **

camel: Camel;

postCamel(): void {
    this.camel = this.----------.value;
    this.apiService.postCamel(this.camel).subscribe();
  }

**rest.component.html **

<app-camel-form></app-camel-form>
<button class="btn-danger ml-3" type="submit" (click)="postCamel()">Submit</button>

Answer 1

First, I would move the submit button into the CamelForm component.

Second, to make the form re-usable for editing you'll need to provide an input for the data so it can be bound to the FormGroup instance. Example, omitting the component definition:

@Input()
camel: ICamel;

form: FormGroup;

initForm(camel?: ICamel): void {
  this.form = this.formBuilder.group({
    id: [camel ? camel.id : null],
    name: [camel ? camel.name : null],
    age: [],
    guardian: this.formBuilder.group({
      id: [camel ? camel.gaurdian.id : null],
      name: [camel ? camel.gaurdian.name : null],
      lastName: [camel ? camel.gaurdian.lastName : null],
      email: [camel ? camel.gaurdian.email : null]
    });
  }
}

Now you can leverage the form in either case by supplying the input, or not:

<app-camel-form [camel]="camel"></app-camel-instance>

Hope that helps you out.

Answer 2

are you sure you want to make a submit button out of the form? if that is false then you can subscribe to submit event and emit it from your component (submit)="postCamel($event)" . Otherwise - you want button out of the form I would propose to do like that

<app-camel-form #camelForm [camel]="camelData"></app-camel-form>
<button (click)="postCamel(camelForm.value)"

and in the form

ngOnChanges(changes) { // this method is needed if you want to pass data to the form 
  if(changes.camel) {
    this.camelForm.patchValue(this.camel)
  }
}

get value() {// this will make the form value be accessible from outside of form component
  return this.camelForm.value;
}