angular-vivid-form-association

This library is a set of angular directives that enables an easier integration between vivid form elements to angular form elements controllers like formControl or ngModel.

Usage

$3

npm i @vonage/vwc-angular-forms

$3

#### Add VwcFormModule to a module

Import VwcFormModule to your module. This will import the exported directive vivid-field.

Example:
``javascript
import { BrowserModule } from '@angular/platform-browser';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import '@vonage/vwc-select';
import '@vonage/vwc-list/vwc-list-item';
import '@vonage/vwc-top-app-bar';
import '@vonage/vwc-button';
import '@vonage/vwc-textfield';
import '@vonage/vwc-textarea';
import { VwcFormModule } from '@vonage/vwc-angular-forms';

@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, FormsModule, ReactiveFormsModule, VwcFormModule],
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {}

`

#### Binding with ngModel

When using a vivid form element, you will need to add the vivid-field directive to it.

Example:

`javascript
[(ngModel)]="myText"

`

You can notify the element that the data is invalid by setting the vwc-error-message Input:

`javascript
[(ngModel)]="myText"
[vwc-error-message]="customErrorMessage">

`
#### Binding in a reactive form

When binding with a reactive form, you need to supply the form control to the directive:
`javascript
vivid-field>
`

This will connect the element to the form control and changing either the form control model or the text area's value will commence both validations and value change in each.

Error Messages

You can send custom validation messages to the element using the vwc-error-message Input:

`javascript
vivid-field
[vwc-error-message]="customErrorMessages">

`

customErrorMessages should be an object that corresponds to validation error keys in your form validators (e.g. required, pattern or any custom validator you are using). See example in the app.

If you'd like to disable the validation form, set customErrorMessages to VALID.

Get a handle on the directive

You'd might like to do custom stuff like dynamic error handlers. You can get a handle to the vivid-field directive like so:

`angular2html
formControlName="someFormControl"
#someFormControlVividField="vivid-field"

`

You will now have someFormControlVividField` as a variable in the angular template you can use or pass to your own directive.

Error reporting and feature requests

If you think there's a feature missing or find a bug, please file an issue. Thank you!