carbon-design-system / carbon-design-system/carbon-components-angular
[proposal/discussion]: form generator service + component
- Dominant language
- TypeScript
- Stars
- 566
- Forks
- 318
- PR merge metrics
- No merged PRs in 30d
Description
Carbon Design System has pretty complete [form guidance](http://www.carbondesignsystem.com/components/form/usage), and Angular has [excellent form handling](https://angular.io/guide/reactive-forms), and our form components keep improving.
So, it follows that we could provide a complete solution for generating forms, based on the Carbon principals and Angular's reactive forms module.
At a high level:
```html
```
```ts
constructor(private formGen: FormGenerator) {}
public formControls = this.formGen.group({
firstName: {value: "", component: "input", validators: [ Validators.required ] },
lastName: {value: "", component: "input", validators: [ Validators.required ] },
address: this.formGen.group({
street: {value: "", component: "input" },
city: {value: "", component: "input", asyncValidators: [ validateCity ] },
province: {value: "", component: "dropdown" },
postalCode: {value: "", component: "input" }
}),
});
```
Where `FormGenerator` would wrap (or potentially extend) FormBuilder ...
```ts
class FormGenerator {
public group(controlConfig: ControlConfig) { // return value TBD
// ...
}
}
```
And the `ControlConfig` interface would resemble:
```ts
interface ControlConfig {
[key: string]: Control
}
type FromComponent = "input" | "select" | "dropdown" | "radio" | "checkbox" | "password"; // and more
interface Control {
value: any;
component: FormComponent | Class; // Union with class iff we can use https://angular.io/api/common/NgComponentOutlet
validators: Array;
asyncValidators: Array;
// + others
}
```
There's still a few open questions, and implementation details to sort out, but this should represent the consumers view of the component/service.
Contributor guide
Research direction
Start by reviewing Angular reactive forms, FormBuilder, and NgComponentOutlet alongside the existing form components and the proposed FormGenerator and ibm-form interfaces. Resolve the open design questions around control configuration and component rendering, then define completion as a working form service and component that support the shown nested controls, validators, submit, and clear behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 20/100