Document Base Line application
parent
81723b29da
commit
f99b91a77e
|
@ -1 +1,89 @@
|
|||
# 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
|
||||
|
||||
|
|
Loading…
Reference in New Issue