Angular: An Exploration in Triggering Validation and Transformation

Recently, I came across an intriguing article about (Dynamic self-registered FormControl in Angular)(https://medium.com/@toha.marko/dynamic-self-registered-reactive-formcontrol-in-angular-bf2342b7f14d).

Everything about this article was well done and very interesting.

There was one point in the article that spiked my interest: the author triggered the "creation" of the Form Controls dynamically within the Angular HTML.

So, I decided to experiment and see if I could use this as a means to trigger data validation and transformation.

This is an experiment, simple to see if I can do something. Personally, I see some benefit in the pattern. But, this does not mean I am endorsing this as a good pattern or a better means than any other way of doing something.

The working code ...

• REPO
• PAGE

The Code

Here's the basics of the data.service.ts ...

data: Array<any> = [
  { first: 'Bob', last: 'Fornal' },
  { first: 'Jenny', last: 'Fornal' },
  { first: 'Patrick', last: 'Fornal' },
  { first: 'Anne', last: 'Fornal' }
];

getData = (): Array<any> => this.data;

validate = (item: any): boolean => item.hasOwnProperty('first') && item.hasOwnProperty('last');

transform = (item: any): any => {
  let transformed: any = Object.assign({}, item);
  if (!transformed.hasOwnProperty('fullname')) {
    transformed.fullname = item.last + ', ' + item.first;
  }
  if (!transformed.hasOwnProperty('checked')) {
    transformed.checked = false;
  }
  console.log(item, transformed);
  return transformed;
}

My intent is to ...

1. Get the data
2. Display a Validation State
3. Transform the data significantly
4. Display the changes

The app.component.ts is really simple ...

data: Array<any>;

constructor(
  private dataService: DataService
) {
  this.data = [ ...this.dataService.getData() ];
}

validate = this.dataService.validate;
transform = this.dataService.transform;

The code simple sets up the data and connects the validate and transform functions the the same in the dataService.

Then, in the HTML (app.component.html) ...

<div class="individual" *ngFor="let item of data;">
  <div>Validated: {{ validate(item) }}</div>

  <ng-container *ngIf="transform(item); let transformed">
    <div>Fullname: {{ transformed.fullname }}</div>
    <div>Status is False: {{ transformed.checked === false }}</div>
  </ng-container>
</div>

Looping over the data, it gets validated, transformed, and displayed ... all exactly as expected.

Conclusion

This was a particularly simple experiment. To me, is shows a triggering path when dealing with data that I haven't explored before.

Generally, when I am digging into someone else's code, I am looking at the DOM (the HTML) first. In this case, being able to see the trigger points and validation processes so early could have a huge benefit.