Aurelia-Validierung in if.bind und mit Objekteigenschaft funktioniert nicht

Question

Ich habe ein Problem mit einer Eingabe-Validierung mit dem Aurelia-Validierung-Plugin.

Die Eigenschaftenbindung, die ich validieren möchte, ist eine Eigenschaft eines Objekts (das manchmal null ist) und befindet sich in einer if.bind für dieses Objekt.

Hier ist mein Code:

<div class="well" if.bind="selectedBody"> 
    <input type="text" class="input-sm" class="form-control" value.bind="selectedBody.name & validate" required pattern="[a-z]+[aA-zZ|0-9]*"> 
    <ul if.bind="controller.errors"> 
     <li repeat.for="error of controller.errors"> 
      ${error.message} 
     </li> 
    </ul> 
</div> 

und mein Ansichtsmodell Konstruktor:

constructor(private ea : EventAggregator, private controllerFactory: ValidationControllerFactory) { 
    this.controller = controllerFactory.createForCurrentScope(); 
    ValidationRules.ensure('selectedBody.name').required().withMessage("Sprite name is required").on(this); 
} 

Ich versuchte, die Gültigkeitsregel zu ersetzen durch:

ValidationRules.ensure('name').required().withMessage("Sprite name is required").on(this.selectedBody); 

aber dann muss ich einstellen mein Objekt auf ein leeres Objekt, anstatt auf Null und Validierung funktioniert nicht, nachdem das Div versteckt und dann wieder angezeigt wird.

Answer 1

Jemand hat mir geholfen, mein Problem zu lösen auf dem aurelia gitter

Die Lösung, die die Gültigkeitsregel in einer Eigenschaftsänderung Listener-Methode zu bewegen war (die ich sehr empfehlen!):

selectedBodyChanged(oldval, newval) { 
    if (this.controller.errors) { 
    this.controller.reset(); 
    } 
    ValidationRules.ensure('name').required().withMessage("Sprite name is required").on(this.selectedBody); 
} 

I setzen Sie den Controller um die Validierungsfehler zu löschen, die von vorherigen selectedBody-Objekten angezeigt wurden.

Answer 2

Ihre selbst beantwortete Frage war hilfreich für mich und ich muss dies als Antwort posten, da ich keine StackOverflow-Punkte habe, so dass der Kommentar blockiert ist.

Ich hatte das gleiche Problem wie Sie und war auf der Suche nach einer Antwort, als ich Ihren Beitrag gefunden habe. Basierend auf Ihren Recherchen habe ich mehrere Events ausprobiert und konnte nichts finden, was den Hörer nur einmal anhängte.

Ich habe eine schwierige Zeit zu finden, arbeiten und Aurelia Beispiele zu vervollständigen, also poste ich dies, um eine Alternative zu geben. Mit nur etwa einer Woche Erfahrung mit Aurelia und TypeScript ist dies wahrscheinlich ein fehlerhaftes Beispiel, aber hoffentlich findet jemand das nützlich.

import { inject } from 'aurelia-framework'; 
import { Tool } from './Tool'; 
import { ToolingService } from './ToolingService'; 
import { ValidationControllerFactory, ValidationRules, ValidationController } from 'aurelia-validation'; 

@inject(ValidationControllerFactory, ToolingService) 
export class ToolDetail { 
    public tool: Tool; 
    public controller: ValidationController; 

    constructor(private validationControllerFactory: ValidationControllerFactory, private toolingService: ToolingService) { 
     this.controller = validationControllerFactory.createForCurrentScope(); 
    } 

    attachValidation(tool: Tool) { 
     ValidationRules.ensure('toolType').required().on(this.tool) 
      .ensure('size').required().on(this.tool) 
      .ensure('code').required().maxLength(15).on(this.tool) 
      .ensure('alternateCode').required().maxLength(15).on(this.tool); 

     return tool; 
    } 

    activate(parms, routeConfig) { 
     return this.toolingService.getById(parms.id) 
      .then(tool => this.tool = tool) 
      .then(tool => { this.attachValidation(this.tool) }); 
    } 
} 

, dass ein Verfahren wie dieses ruft:

import { HttpClient } from 'aurelia-fetch-client'; 
import { NewInstance, inject } from 'aurelia-framework'; 
import { Tool } from './Tool'; 

@inject(NewInstance.of(HttpClient)) 
export class ToolingService { 

    constructor(private http: HttpClient) { 
     http.configure(config => { 
      config.useStandardConfiguration() 
       .withBaseUrl('/api/Tooling/Tool/'); 
     }); 
    } 

    getById(id: string): Promise<Tool> { 
     return this.http.fetch(id) 
      .then(result => result.json() as Promise<Tool>) 
      .catch(error => console.log(error)); 
    } 
}