https://github.com/mohammadmusaei/axiomform
Dynamic form component with a custom decorator
https://github.com/mohammadmusaei/axiomform
angular2 angular4 custom-decorator decorators dynamicforms form reactiveform-validation reactiveforms
Last synced: 2 months ago
JSON representation
Dynamic form component with a custom decorator
- Host: GitHub
- URL: https://github.com/mohammadmusaei/axiomform
- Owner: mohammadmusaei
- Created: 2019-02-13T08:39:30.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-02-15T08:47:29.000Z (over 6 years ago)
- Last Synced: 2025-03-02T16:16:49.447Z (3 months ago)
- Topics: angular2, angular4, custom-decorator, decorators, dynamicforms, form, reactiveform-validation, reactiveforms
- Language: TypeScript
- Homepage: http://app.musaei.me/angular/form/
- Size: 171 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Axiom Form
### Online Demo
[Usage Demo](http://app.musaei.me/angular/form/)
### Stackblitz Source Demo
[Stackblitz Demo](https://stackblitz.com/edit/axiom-form)
### Installation
##### Install component package from npm :
`npm install axiom-form`
##### Import component module :
```typescript
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AxiomFormModule } from 'axiom-form';
...
@NgModule({
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
AxiomFormModule
],
declarations: [
AppComponent
],
bootstrap: [AppComponent]
})
...
```
### Usage
1. Use `[ax-form]` attribute component and assign a formGroup to it.
2. For each input elements use `axFormControl`.
3. For action buttons[Submit and Reset] use `axFormButton` and pass a string parameter to it as button type.
```html
Email
div class="form-group col-md-6">
Password
Sign up
Clear
```
### Custom form decorator
Also you can use Axiom custom form decorator `@AxForm` for every components you want and generate formGroups.
```typescript
@AxForm({
form: {
email: ['', [Validators.required, Validators.email]],
password: ['', [Validators.required, Validators.minLength(6)]],
...
},
form2 : { ... },
form3 : { ... },
...
})
```
When use `@AxForm` decorator it create a new property for component class as `axForms` with type `{ [key: string]: FormGroup; }`, so you can access each generated formGroups with `this.axForms['your form name']`.
for better usage please implements `AxForm` interface in your component class.
Here is an example of decorator usage.
```typescript
import { AxForm } from 'axiom-form'
@AxForm({
form: {
email: ['', [Validators.required, Validators.email]],
password: ['', [Validators.required, Validators.minLength(6)]],
address: [''],
city: [''],
state: [''],
zip: ['', [Validators.minLength(10), Validators.maxLength(10),(control: AbstractControl): { [key: string]: any } => {
var message = 'Just numbers accepted!';
return /^\d+$/.test(control.value) ? null : { message: message };
}]],
agree: ['']
}
})
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements AxForm {
public axForms: { [key: string]: FormGroup; };
public save(): void {
console.log(this.axForms.form.value);
}
}
```
### @Input() Params
| Name | Type | Usage |
| ------ | ------ | ------ |
| axAutoDisableSubmit | boolean | auto disable submit button when form is invalid |
| axShowErrors | boolean | show form errors as a list |
## License
[MIT](http://opensource.org/licenses/MIT)