carbon-design-system / carbon-design-system/carbon-components-angular

[proposal/discussion]: form generator service + component

Open
#282 3 comments 3 reactions 0 assignees View on GitHub
discussion new 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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.