Brew Forms Angular

Form components for Angular

Install

npm install brewdigital-forms
or
yarn add brewdigital-forms

Getting Started

Component

import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import {BehaviorSubject} from 'rxjs';
import {ServerErrorService} from '../../../../brew-forms/src/lib/services/server-error.service';
import {Example} from '../model/example';

@Component({
    selector: 'app-example-form',
    templateUrl: './example-form.component.html'
})
export class ExampleFormComponent implements OnInit {

    form: FormGroup;

    @Input() data$: BehaviorSubject<Example>;
    @Input() serverError: ServerErrorService;
    @Output() values = new EventEmitter();

    errorMessages = {
        title: {
            required: 'Title is required',
            minlength: 'Minimum Length 3',
            maxlength: 'Maximum Length 40',
        },
        description: {
            required: 'Description is required',
            minlength: 'Minimum Length 10',
            maxlength: 'Maximum Length 280',
        },
        isPublished: {},
        category: {}
    };

    constructor(
        private fb: FormBuilder
    ) {
    }

    ngOnInit() {
        this.form = this.fb.group({
            title: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(40)]],
            description: ['', [Validators.required, Validators.minLength(10), Validators.maxLength(280)]],
            isPublished: [false],
            category: [0],
        });

        if (typeof this.data$ !== 'undefined') {
            this.data$.subscribe(data => {
                this.form.controls.title.setValue(data.title);
                this.form.controls.description.setValue(data.description);
                this.form.controls.isPublised.setValue(data.isPublised);
                this.form.controls.category.setValue(data.category);
            });
        }
    }

    save() {
        this.form.reset(this.form.value);
        this.serverError.reset();
        this.values.emit(this.form.value);
    }
}

Component HTML

<div [formGroup]="form">
    <brew-input
            [errorMessages]="errorMessages.title"
            [errors]="serverError.error.title"
            [formGroup]="form"
            controlName="title"
            label="Title"
            placeholder="Enter Title"
    ></brew-input>
    <brew-text-area
            [errorMessages]="errorMessages.description" [errors]="serverError.error.description"
            [formGroup]="form" controlName="description" label="Description" placeholder="Enter Description"
    ></brew-text-area>
    <brew-select
            [errorMessages]="errorMessages.category"
            [errors]="serverError.error.category"
            [formGroup]="form"
            controlName="category"
            label="Category"
    >
        <option value="0">All</option>
        <option value="1">Category One</option>
        <option value="2">Category Two</option>
    </brew-select>
    <p>
        <brew-checkbox
                [formGroup]="form" controlName="isPublished" label="Is Published?"
        ></brew-checkbox>
    </p>
</div>