[Resolved] Duplicate error messages in Aurelia Validation

Help Requests
1

Resolution Thanks to this post on StackOverflow, I realized I needed to create a NewInstance of my ValidationController.

//constructor of map.ts -- Map View Model
import {NewInstance} from 'aurelia-framework';

static inject = [NewInstance.of(ValidationController)]
constructor(public vc : ValidationController){ ... }

Original Post
I’m composing a view-model that uses aurelia-validation to validate a specific class in my view-model. The properties of the class are bound to the input fields of the view and use the & validate extension.

I’m not using aurelia-navigation to switch between view-models in this case. What I’m finding is that each time I switch away from the view and back to it, I start getting an additional (duplicate) error message for each property. IOW, on my first visit the the view, if I leave the Name field blank, I get the appropriate error message: “Name is required”. However, if I switch to a different view, switch back to the original view and then leave the Name field blank, I now get TWO error messages stating that “Name is required”.

I then noticed that in re-setting the form, I instantiate a new instance of the property on my vm and I also start getting duplicate messages. So, it appears that because of where I’m defining my ValidationRules (in the same file as my class – see csv-importer.ts below), the rules keep being added every time I instantiate an instance of the class.

Where/when should i be declaring my ValidationRules to keep them from being duplicated? I was trying to only create ValidationRules when I need them – IOW, when the user gets to a view that will be working with validation. I could probably define my rules in app.ts, but that seems like overkill to have to define all the validation rules for my app in app.ts – even for many objects that may not ever be edited by the user. Is there a better way to handle this?

UPDATE: I was able to fix the issue by removing the initialization of the property in the declaration:
UPDATE 2: Apparently I did not fix the issue when switching between views – only the issue with resetting the page.

public importer : CsvImporter; //in map.ts

and calling this.resetPage() in activate(). However, I’m still curious why the initializing was causing a problem. It appears that I re-initialize the object this.importer = new CsvImporter(); without causing problems – just not if I do it in the declaration. VERY confused as to what is happening.

Here are code snippets to help show what I’m doing.

map.ts

import {CsvImporter} from 'models/csv-importer';
import {ValidationController} from 'aurelia-validation';
import {MyValidationRenderer} from 'resources/validation/my-validation-renderer';
export class Map {
    public importer : CsvImporter = new CsvImporter();

    static inject = [ValidationController]
    constructor(public vc = ValidationController){
        this.vc.addRenderer(new MyValidationRenderer());
    }

   resetPage(){
       this.importer = new CsvImporter();
    }
}

map.html

<input type="text" value.bind="importer.name & validate" />
<input type="text" value.bind="importer.description & validate" />
...
<button click.delegate="resetPage()">Reset</button>

csv-importer.ts

import {ValidationRules} from 'aurelia-validation';
export class CsvImporter {
   public name : string = "";
   public description : string = "";
    ...
}

ValidationRules
    .ensure((m: CsvImporter) => m.name).required()
    .ensure((m: CsvImporter) => m.description).required()
    .on(CsvImporter);
2 Likes