203 Lotus blogs updated hourly. Who will post next? Home | Blogs | Search | About 
 
Latest 7 Posts
Building Facebook Messenger Bots with Botkit and Watson
Thu, Nov 16th 2017 38
Creating Alexa Skills with OpenWhisk and IBM Watson
Thu, Nov 16th 2017 34
Integrating Applications without writing Code
Tue, Nov 14th 2017 128
Pictures from W-JAX 2017
Fri, Nov 10th 2017 43
Using regular Expressions for Entities in Conversations
Fri, Nov 3rd 2017 8
My Favorite IBM Developer Journeys
Wed, Oct 18th 2017 5
Fast On-Ramp for building Cloud-Native Apps
Tue, Oct 17th 2017 5
Top 10
Integrating Applications without writing Code
Tue, Nov 14th 2017 128
Pictures from W-JAX 2017
Fri, Nov 10th 2017 43
Building Facebook Messenger Bots with Botkit and Watson
Thu, Nov 16th 2017 38
Creating Alexa Skills with OpenWhisk and IBM Watson
Thu, Nov 16th 2017 34
Deploying Angular 2 Apps to Bluemix
Tue, Apr 11th 2017 27
Getting started with Tensorflow on IBM Bluemix
Mon, Apr 3rd 2017 14
How to build Facebook Chatbots with IBM Watson
Thu, May 12th 2016 13
Running the Sample App BlueChatter on Kubernetes
Mon, Apr 10th 2017 12
New Slots Filling Functionality in Watson Conversation
Fri, Jun 23rd 2017 12
How to write AngularJS Frontends for LoopBack Applications
Mon, Feb 29th 2016 11


Angular Form Validations with Redux for multiple Routes
Twitter Google+ Facebook LinkedIn Addthis Email Gmail Flipboard Reddit Tumblr WhatsApp StumbleUpon Yammer Evernote Delicious
Niklas Heidloff    

Many frontend applications require the extensive use of forms to allow users entering information. Angular supports various mechanisms to handle forms, but I’ve struggled to figure out how to handle validations of data on different pages/routes. Below is a pattern I’ve used based on Redux which doesn’t leverage much of the Angular forms functionality but works very nicely for me.

Initially I thought that my requirements would be pretty straight forward and common for single-page applications. However there were two things which I didn’t manage to address with core Angular forms functionality.

  • Display validation errors for multiple forms on different pages (pages from an user experience perspective; technically routes) including for forms that are not currently visible. In my case I had a sidebar component with validation errors which was displayed on every page.
  • Display validation errors for forms that have not been loaded yet. This was necessary since I read an initial set of data which was used to pre-populate forms.

Angular supports two types of forms handling – template driven forms and reactive forms. Since the reactive forms provide more flexibility I started to use them. My hope was to somehow utilize the router to load all pages without showing them to trigger the out of the box form validations. Unfortunately I didn’t get this to work without a lot of flickering and weird behavior in the user interface.

A separate issue I had was refreshing of components. Read my older blog entry My Advice: Don’t use Angular 2+ without Redux for details. Because of the refresh issues and the form validation issues I decided to do a bigger refactoring of my code to use Redux.

I have open sourced an application which demonstrates how Redux helps to validate data for forms before forms have been loaded. The following screenshot shows an validation error of the password field and in the right column the Redux Chrome extension which displays state information.

angular-redux-forms

Here is an overview of how this has been implemented. Let’s start with the HTML for the password field.

<input [value]="watsonPassword$ | async" (blur)="onBlurWatsonPassword($event)" (keyup)="onKeyUpWatsonPassword($event)" class="form-control" id="watsonPassword" />
<div *ngIf="(validationErrorsPassword$ | async)?.length > 0" class="alert alert-warning">
    {{ (validationErrorsPassword$ | async)[0].displayText }}
</div>

In the component’s Typescript file observables are used for the value of the password field and the validation errors. With the “xxx$ | async” notation above the values are displayed in the user interface when they change.

@select(['tool', 'watsonPassword']) watsonPassword$: Observable<boolean>;
validationErrorsPassword$: Observable<ValidationError[]>;

ngOnInit(): void {
   this.skillOverviewForm = this.formBuilder.group({});
   ...
   this.validationErrorsPassword$ = this.ngRedux.select((state) => {
      let errors: ValidationError[] = [];
      state.tool.validationErrors.forEach((validationError) => {
         if (validationError.itemName == 'watsonPassword') errors.push(validationError);
      });
      return errors;
   });
   ...	
}

onKeyUpWatsonPassword(event) {
   let value: string;
   let element: any;
   element = document.getElementById('watsonPassword');
   if (element) {
      value = element.value;
      this.ngRedux.dispatch({ type: ToolAction.SET_WATSON_USER_PASSWORD, payload: value });
   }
}

When users change the password the Redux reducer is invoked which sets the new value in the Redux store and triggers the validation logic.

export function toolReducer(state: Tool = INITIAL_TOOL_STATE, action: any) {
   ...
   switch (action.type) {
      case ToolAction.SET_WATSON_USER_PASSWORD:
         newTool.watsonPassword = action.payload;            
         Validations.validate(newTool);
         return newTool;     
      ... 
      default:
         return state;
    }
}

In the Validations class all errors are initially deleted and (re-)created if necessary.

export class Validations {
   static validate(tool: Tool) {
      tool.validationErrors = [];
      Validations.watsonPassword(tool);
      ...
   }

   static watsonPassword(tool: Tool): void {
      let itemName: string = 'watsonPassword';
      let error: ValidationError;
      let value: string = "";
      let validatorOutput: boolean;
      let type: string;
      if (tool.watsonPassword) {
         value = tool.watsonPassword;
      }

      validatorOutput = Validators.required(value);
      type = Validators.errorTypeRequired;
      if (validatorOutput) {
         error = new ValidationError(itemName, 'The Watson Conversation password is required.');
         tool.validationErrors.push(error);
      }
      ...
   }
}

Check out the full sample application Conversation Inspector for IBM Watson for details.

The post Angular Form Validations with Redux for multiple Routes appeared first on Niklas Heidloff.



---------------------
http://heidloff.net/article/angular-2-form-redux-multiple-routes
Aug 01, 2017
7 hits



Recent Blog Posts
38
Building Facebook Messenger Bots with Botkit and Watson
Thu, Nov 16th 2017 10:54a   Niklas Heidloff
I’ve implemented a sample Facebook Messenger bot which leverages the Node.js library Botkit and IBM Watson Conversation. With Botkit you can build bots for Slack, Facebook Messenger, Twilio and other messaging clients. For natural language understanding different services can be used, for example IBM Watson, Api.ai, Wit.ai or Rasa. Most of the code can be shared for Slack and Facebook Messenger bots. Check out the code on GitHub. Similarly to my sample Slack bot, the Facebook Messenger bo
34
Creating Alexa Skills with OpenWhisk and IBM Watson
Thu, Nov 16th 2017 8:43a   Niklas Heidloff
My first code pattern (formerly known as developer journeys) has been published on developer.ibm.com/code. The pattern describes how to build Alexa skills with OpenWhisk. Rather than using intent and entity identification from Alexa, Watson Conversation is used. This allows developers to define conversation flows declaratively and developers can reuse conversations that are available in the Bot Asset Exchange. My colleague Mark Sturdevant improved the documentation and created a video. Check out
128
Integrating Applications without writing Code
Tue, Nov 14th 2017 2:52p   Niklas Heidloff
IBM App Connect is an IPaaS (Integration Platform as a Service) to connect different applications without having to write code. Similarly to IFTTT users are typically business users or citizen developers from line of business departments. App Connect provides currently roughly 50 connectors to integrate applications like Salesforce, SAP, Slack and Gmail. See the documentation for details. Users can graphically build flows that are either event-triggered, for example if a document is changed in a
43
Pictures from W-JAX 2017
Fri, Nov 10th 2017 10:32a   Niklas Heidloff
This week I attended W-JAX in Munich, Germany, which is a developer conference with 1400 attendees with a focus on Java and enterprise technologies. My colleagues and I presented and demonstrated the IBM Cloud and the IBM Code developer site. Below are some pictures. The IBM team: Discussions with developers at the booth: I gave a session about Slack bots and IBM Watson Conversation: One thing I really liked was a demo another company gave at their booth. They connected Anki Overdrive cars to
8
Using regular Expressions for Entities in Conversations
Fri, Nov 3rd 2017 8:06a   Niklas Heidloff
In conversational experiences entities are used to identify classes of objects in user phrases, for example ‘city’ or ‘person’. Watson Conversation supports entity definitions with predefined lists of potential values and synonyms. Recently a new capability has been added so that you can also use regular expressions to identify entities (beta). This functionality is useful when, for example, you want to identify email addresses, phone numbers or URLs without predefining a
5
My Favorite IBM Developer Journeys
Wed, Oct 18th 2017 3:12p   Niklas Heidloff
The team of developer advocates within IBM has created a new site with journeys for developers. Journeys are sample scenarios that are available as open source, well documented and easy to reuse and deploy. There are roughly 60 journeys right now and new ones are published regularly. Check out the journeys at developer.ibm.com/code/journey. Here are my favorite journeys: Make Java microservices resilient with Istio “Twelve-factor apps make a strong case for designing and implementing you
5
Fast On-Ramp for building Cloud-Native Apps
Tue, Oct 17th 2017 9:32a   Niklas Heidloff
In order for developers to get started quickly to build applications and deploy them on the IBM Cloud, new starter kits have been made available. Check out the new IBM Cloud App Service. You can choose from several template the type of application or microservice you want to build: Express.js Backend, Express.js React, Java MicroProfile, Java Spring Backend, Swift Kitura, Python Microservice and more. Additionally you can create new or select existing IBM Cloud services, for example the Watson s
3
How to write your own Slack Chatbots in Javascript
Mon, Oct 16th 2017 2:54p   Niklas Heidloff
Last week Ansgar Schmidt and I gave a session at Codemotion How to write your own Slack Chatbots in Javascript. Below are the slides with screenshots of our demos. We demonstrated how to write a Node.js application that uses Botkit to connect with Slack and that uses IBM Watson Conversation as natural language processing service. Get the code of our sample from GitHub. The post How to write your own Slack Chatbots in Javascript appeared first on Niklas Heidloff.
6
Composing Serverless Apps with IBM Cloud Functions
Tue, Oct 10th 2017 8:13p   Niklas Heidloff
Today at Serverlessconf IBM announced a new key capability (as IBM Research preview) of IBM Cloud Functions. With the new tool ‘Composer‘ apps can be created which contain multiple cloud functions. These apps coordinate the invocations of actions and the data flow. Compared to the previously available action sequences the new functionality is much more flexible. Cloud functions are typically rather simple and focussed on specific tasks which is why people often refer to cloud functio
4
Testing Watson Conversations in Slack
Thu, Oct 5th 2017 7:03a   Niklas Heidloff
Next week Ansgar Schmidt and I will give a session ‘How to write your own Slack Chatbots in Javascript‘ at codemotion. We will demonstrate how to connect Slack to Watson Conversation via the open source project botkit which leverages the Slack Real Time Messaging API. This works well for production bots, but requires some configuration first. For testing purposes there is an easier way to create a Slack app with a bot user and to add this to a Slack team. From the ‘Deploy’




Created and Maintained by Yancy Lent - About - Planet Lotus Blog - Advertising - Mobile Edition