@vonage/vwc-angular-forms

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

Installation

npm i @vonage/vwc-angular-forms

Usage

Add VwcFormModule to a module

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

Example:

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:

<vwc-textarea vivid-field name="freeText" 
                          [(ngModel)]="myText"
</vwc-textarea>

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

<vwc-textarea vivid-field name="freeText" 
                          [(ngModel)]="myText" 
                          [vwc-error-message]="customErrorMessage">
</vwc-textarea>

Binding in a reactive form

When binding with a reactive form, you need to supply the form control to the directive:

<vwc-textarea formControlName="freeText"
              vivid-field></vwc-textarea>

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:

<vwc-textarea formControlName="freeText"
              vivid-field
              [vwc-error-message]="customErrorMessages">
</vwc-textarea>

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:

<vwc-textfield vivid-field
               formControlName="someFormControl"
               #someFormControlVividField="vivid-field"
</vwc-textfield>

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!