nested-forms/apps/baseline/README.md

90 lines
2.6 KiB
Markdown

# Base Line - The Single component
The easiest way to create a simple Reactive Form is to use a single Angular component to build and display the form. In this example application, an asynchronous call to an API is simulated. The `Contact` object thus obtained is used to create and initialize a `FormGroup` using the Angular `FormBuilder`.
```typescript
public ngOnInit() {
this.subscription = this.service
.loadContact()
.subscribe((data: Contact) => {
this.form = this.createForm(data);
});
}
public createForm(model: Contact): FormGroup {
const name = model.name;
const addresses: FormArray = this.fb.array([]);
const group = this.fb.group({
name: this.fb.group({
firstName: [name ? name.firstName : ''],
lastName: [name ? name.lastName : ''],
middleName: [name ? name.middleName : ''],
prefix: [name ? name.prefix : ''],
suffix: [name ? name.suffix : ''],
}),
addresses: addresses,
});
if (model.addresses) {
model.addresses.forEach(addr => {
addresses.push(
this.fb.group({
line1: [addr ? addr.line1 : ''],
line2: [addr ? addr.line2 : ''],
city: [addr ? addr.city : ''],
state: [addr ? addr.state : ''],
postalCode: [addr ? addr.postalCode : ''],
}),
);
});
}
return group;
}
get addresses(): FormArray {
return this.form.get('addresses') as FormArray;
}
```
The component's template remders input controls for the Contact's name, and iterates over the array of addresses to render controls to edit each one.
```html
<form *ngIf="form" [formGroup]="form">
<ng-container formGroupName="name">
<div>
<label for="firstName">First Name: </label>
<input name="firstName" formControlName="firstName">
</div>
<!-- etc for each attribute in the Contact name -->
</ng-container>
<ng-container formArrayName="addresses">
<ng-container *ngFor="let addr of addresses.controls; let i=index">
<!-- Note: the form group is bound to the index variable -->
<ng-container [formGroupName]="i">
<div>
<label for="line1">Line 1: </label>
<input name="line1" formControlName="line1">
</div>
<!-- etc for each attribute in the Address -->
</ng-container>
</ng-container>
</ng-container>
</form>
```
## Pros
- All of the logic is in one place
- The potential complexity of multiple components is avoided
## Cons
- The component and its template will become ever larger and more complex as the form grows
- Little-to-no opportunity for code reuse