Domain Object Reactive Forms for Angular and TypeScript
MIT License
Version 4 for Angular 5+.
I'm maintaining this library in my free time. But since my son was born in 2017, I have little to no free time :)
Angular's Reactive Forms (a.k.a. Model-driven Forms) are great. Then, the dynamic generation of such forms is the next evolution step (sometimes called Dynamic Forms). This library is about taking those things to yet another level by coupling forms with Domain Objects.
Add some annotations to the object.
@DorfObject()
export class Person {
@DorfInput({
label: "Name",
type: "text",
validator: Validators.required,
errorMessage: "Name is required",
updateModelOnChange: true
})
name: string;
@DorfInput({
label: "Surname",
type: "text",
validator: Validators.required,
errorMessage: "Surname is required",
updateModelOnChange: true
})
surname: string;
}
Create a Component form which implements IDorfForm
and uses some annotations. E.g. you should pass the above object as an annotated (@DorfObjectInput()
) property.
@DorfForm() // must be above the Component annotation!
@Component({
selector: "person-details"
// no template or templateUrl = default one from DORF (!)
})
export class PersonDetailComponent implements IDorfForm {
@DorfObjectInput() domainObject: Person; // has Angular's @Input() behavior as well (!)
constructor(public config: DorfConfigService) { }
onDorfSubmit() {
let result = this["form"].value;
console.log(result);
}
}
You are done! Really! Enjoy your Reactive Form.
The aim of this library is to speed up boring things like a creation of the ordinary forms and styling them. Library is not strictly connected with any CSS framework. You can just pass the classes as DorfConfigService
parameters.
Future plans include:
onSummary
is already presented in the field definition
)