Angular forms can be categorized into two types:
- Template driven forms
and
- Reactive forms (utilizing FormGroup/FormBuilder).
I personally prefer Reactive forms due to the customizable validation option and the ability to create dynamic forms. These features make Reactive forms more powerful.
For more information on reactive forms, you can visit this link about Angular2 reactive form value confirmation
In terms of observables, we often use a type like Observable <person[]>.
We can define an interface for each object and utilize it in the component.
Although mapped Types offer options like readonly and proxies, not many people are discussing them currently since they are available in TypeScript 2.1 while our angular app is using "typescript": "~2.0.10" for stability.
Mapped Types
A common task involves making all properties of an existing type optional. For instance, if we have a `Person`:
interface Person {
name: string;
age: number;
location: string;
}
A partially populated version would look like:
interface PartialPerson {
name?: string;
age?: number;
location?: string;
}
With Mapped types, `PartialPerson` can be created as a generalized transformation of the type `Person`:
type Partial<T> = {
[P in keyof T]?: T[P];
};
type PartialPerson = Partial<Person>;
Mapped types involve taking a union of literal types and generating new properties for a new object type. They are similar to list comprehensions in Python, but instead of creating new elements, they generate new properties in a type.
In addition to `Partial`, Mapped Types can facilitate various transformations on types:
// Keep types unchanged, but make each property read-only.
type Readonly<T> = {
readonly [P in keyof T]: T[P];
};
// Retain the same property names, but change the value to a promise instead of a concrete one
type Deferred<T> = {
[P in keyof T]: Promise<T[P]>;
};
// Create proxies around properties of T
type Proxify<T> = {
[P in keyof T]: { get(): T[P]; set(v: T[P]): void }
};