#Input form child component - html

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;
}