title: Aurelia Validation - Form is loaded with data from a fetch - validation evaluates full fields as empty
body: <p>I have a form that I successfully load with data from a fetch. If I then click save on that form Aurelia Validation evaluates those form text fields that have data as empty and displays this as an error below the save button - picture below.</p>
  
  <p>The validation works perfectly on an empty form but for a form with loaded values its as if the form is acting like it is empty.</p>
  
  <p>Surely if there are characters in the text box either by typing or by loading from a fetch it should evaluate that in the context of "required" and pass? </p>
  
  <p>Currently its not when its loaded from a fetch.</p>
  
  <p><strong>Code</strong></p>
  
  <p>Here is the typescript view model:</p>
  
  <pre><code>    import { HttpClient } from "aurelia-fetch-client";
      import { autoinject, inject, NewInstance, PLATFORM } from "aurelia-framework";
      import { Router, activationStrategy } from "aurelia-router";
      import {
          ValidationControllerFactory,
          ValidationController,
          ValidationRules,
          validateTrigger
      } from "aurelia-validation";
      import { BootstrapFormRenderer } from "../../../../services/bootstrapFormRenderer/bootstrapFormRenderer";
      //import  from '../../../../services/customValidationRules/customValidationRules'
  
      import { AuthService } from "../../../../services/auth/auth-service"
  
      @autoinject
      export class Client {
          controller: ValidationController;
          client = new ClientDetails;
          job: Job;
          visits = Array();
          hasClientId: boolean;
          heading: string = "New Client";
          headingIcon: string = "fa-user-plus";
  
          username: string;
  
  
          constructor(
              private authService: AuthService,
              private router: Router,
              private controllerFactory: ValidationControllerFactory
          ) {
              this.router = router;
              this.controller = controllerFactory.createForCurrentScope();
              this.controller.addRenderer(new BootstrapFormRenderer());
              this.controller.addObject(this)
              this.controller.addObject(this.client);
  
          }
  
          // Required to reload new instance.
          determineActivationStrategy() {
              return activationStrategy.replace; //replace the viewmodel with a new instance
              // or activationStrategy.invokeLifecycle to invoke router lifecycle methods on the existing VM
              // or activationStrategy.noChange to explicitly use the default behavior
          }
  
          activate(parms, routeConfig) {
              this.hasClientId = parms.id;
  
              if (this.hasClientId) {
                  const headers = this.authService.header();
  
                  fetch("/api/Client/edit/" + parms.id, {
                      method: "GET",
                      headers
                  })
                      .then(response =&gt; response.json())
                      .then(data =&gt; {
                          this.client = data
                      })
                  this.heading = "Edit Client"; // An id was submitted in the route so we change the heading as well.
                  this.headingIcon = "fa-pencil-square-o";
              }
              return null;
          }
  
          submitClient() {
              console.log("gets  Here");
              console.log("this.controller.validate(): ", this.controller.validate());
              //this.controller.validate();
              if (this.controller.validate()) {
                  console.log("Hi!");
              }
          }
  
          rowSelected(jobId: number) {
              let job = this.client.jobs.filter(f =&gt; f.id === jobId);
              if (job &amp;&amp; job.length &gt; 0) {
                  var jobVisits = job.map(j =&gt; { return j.jobVisits; })[0];
                  this.visits = jobVisits;
              }
          }
      }
  
  
      export class ClientDetails {
  
          clientId: number;
          clientNo: number;
          company: boolean;
          companyName: string;
          abn: string;
          isWarrantyCompany: boolean;
          requiresPartsPayment: boolean;
          clientFirstName: string;
          clientLastName: string;
          email: string;
          mobilePhone: string;
          phone: string;
          notes: string;
  
          address: AddressDetails;
  
          jobs: Job[];
  
          bankName: string;
          bankBSB: string;
          bankAccount: string;
          active: boolean;
          deActivated: string;
          activity: boolean;
          dateCreated: string;
          dateUpdated: string;
  
          creatorId: number;
          creatorName: string;
      }
  
      class Job {
          id: number;
          agentJobNo: number;
          jobNo: number;
          jobType: string;
          jobVisits: Visit[]
          numberOfVisits: number;
          status: string;
      }
  
      class Visit {
          jobVisitId: number;
          dateCreated: string;
          visitDate: string;
          startTime: string;
          endTime: string;
      }
  
      class AddressDetails {
          address1: string;
          address2: string;
          suburb: string;
          postcode: string;
          stateShortName: string;
          addressLocationId: number;
      }
  
      // Validation Rules.
      ValidationRules
          .ensure((a: ClientDetails) =&gt; a.companyName).required()
              .when((a: ClientDetails) =&gt; a.company === true)
              .withMessage('Company name is required if client is a company.')
          .ensure((a: ClientDetails) =&gt; a.clientLastName).required()
          .ensure((a: ClientDetails) =&gt; a.mobilePhone).required()
          .on(ClientDetails)
  </code></pre>
  
  <p>The fetch is in the activate function and only fetches if there is an id supplied. The fetch loads "client" with the data that is returned. This works and I have a form with all the data from the fetch displayed.</p>
  
  <p>However, if I click the "Save" button even if the two fields "lastName" and "mobilePhone" have values in them the "submitClient()" function triggers and "this.controller.validate()" evaluates these fields to be empty.</p>
  
  <p>Shouldnt it see that these fields have values in them? Is there something I am missing here?</p>
  
  <p>Here is how the view has "lastName" - note that "&amp; validate" is present.</p>
  
  <pre><code>                &lt;div class="col-md-6"&gt;
                      &lt;div class="col-md-3"&gt;
                          &lt;div class="form-group"&gt;
                              &lt;label class="control-label pull-right" for="lastname"&gt;Last Name:&amp;nbsp;&lt;/label&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="col-md-9"&gt;
                          &lt;div class="form-group"&gt;
                              &lt;input type="text" value.bind="client.clientLastName &amp; validate" class="form-control" id="lastname" placeholder="Last Name..."&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/FDnE6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FDnE6.png" alt="enter image description here"></a></p>