如何从Form控件中获取值以在Angular2的Javascript中使用

Question

Here is my Form Control:

 <div class="field">
        <label for="AgeInput">Age</label>
        <input type="text"
          id="AgeInput"
          [formControl]="agefld">
         <div *ngIf="agefld.hasError('required')"
           class="ui error message">Age is required</div> 
         <div *ngIf="agefld.hasError('invalidAge')"
           class="ui error message">Age must be greater than 0</div>
      </div>



 <div class="field">
        <label for="dobInput">Date of Birth</label>
        <input type="text"
          id="dobInput"
          [formControl]="dob">
         <div *ngIf="dob.hasError('required')"
           class="ui error message">Date of Birth is required</div> 
          <div *ngIf="dob.hasError('invalidDate')"
           class="ui error message">Age and date do not compute</div>  
      </div>  

Here is my custom function :

function validateDob(control: FormControl): {[s:string]: boolean}{
  var today = new Date();
  var inDate = new Date(control.value);
  var calcAge = Math.abs(today - inDate);
  var ageDif = Math.floor(calcAge / (1000 * 60 * 60 * 24 * 365))
  var otherAge = 51;
  alert(" Entered age : " + parseInt(getValue("agefld"));

  if (50 != ageDif){
    return {invalidDate: true}
  }
}

What I would like to do is calculate if the entered date is valid based on the entered agefld. But I keep getting "Agefld" is undefined. I have tried several different things such as {{agefld}}, [{agefld}] and even this.agefld. but same message keeps appearing. This cannot be that difficult.

Answer 1

You have to create a directive that implements the Validator interface. And use this directive in HTML form. Don't forget to set this directive in the ngModule declarations tag.