Angular(4):模板驱动形式的自定义验证器显示后面字段的当前值

时间:2017-09-09 15:15:04

标签: angular angular-validation

我似乎无法弄清楚为什么我的自定义验证器落后于字段值一步。示例:我的输入字段具有逐个输入的值123。但我的验证器值为12.

我无法正确比较两个字段之间的值。 这是指令中的验证器:

<div class="col-md-6">

   <table class="table table-bordered">
    <tbody>

<script>
  (function() {
    var cx = '008166669750552411704:aldcxfluvae';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:search>

    <?php

if(isset($_GET['category_name'])){

$category_name= $_GET['category_name'];

$get_detail= "select * from academic_work where category='$category_name' and status = 'Active'";

$run_detail= mysqli_query($con, $get_detail);

while($row_detail= mysqli_fetch_array($run_detail)){

$id= $row_detail['id'];
$student_email=$row_detail['student_email'];
$category=$row_detail['category'];
$title=$row_detail['title'];
$description=$row_detail['description'];
$pages=$row_detail['pages'];
$grade=$row_detail['grade'];
$name_processor=$row_detail['name_processor'];
$price=$row_detail['price'];
$discount_percent=$row_detail['discount_percent'];
$payment_commission=$row_detail['payment_commission'];
$pro_file=$row_detail['pro_file'];
$status=$row_detail['status'];
$date=$row_detail['date'];

echo "
      <tr>
        <td>
  <h6 style='color:green;'>$title</h6>
      <p style='color:black;'>
Description :- $description<br>
Name of Processor :- $name_processor<br>
Pages :- $pages<br>
Price :- $price<br></p>
 </td>
 </tr>
";
}
}

else {

$all_detail= "select * from academic_work where status = 'Active'";

$run_all_detail= mysqli_query($con, $all_detail);

while($row_all_detail= mysqli_fetch_array($run_all_detail)){

$id_all= $row_all_detail['id'];
$student_email_all=$row_all_detail['student_email'];
$category_all=$row_all_detail['category'];
$title_all=$row_all_detail['title'];
$description_all=$row_all_detail['description'];
$pages_all=$row_all_detail['pages'];
$grade_all=$row_all_detail['grade'];
$name_processor_all=$row_all_detail['name_processor'];
$price_all=$row_all_detail['price'];
$discount_percent_all=$row_all_detail['discount_percent'];
$payment_commission_all=$row_all_detail['payment_commission'];
$pro_file_all=$row_all_detail['pro_file'];
$status_all=$row_all_detail['status'];
$date_all=$row_all_detail['date'];

echo "
      <tr>
        <td>
  <h6 style='color:green;'>$title_all</h6>
      <p style='color:black;'>
Description :- $description_all<br>
Name of Processor :- $name_processor_all<br>
Pages :- $pages_all<br>
Price :- $price_all<br></p>
 </td>
 </tr>
";
}

}
?>
 </gcse:search>
 </tbody>
         </table>
  </div>

这是该字段的html:

@Directive({
  selector: '[validateEqual][formControlName],[validateEqual][formControl],[validateEqual][ngModel]',
  providers: [
    {
      provide: NG_VALIDATORS,
      useExisting: forwardRef(() => PasswordValidationDirective),
      multi: true
    }
  ]
})
export class PasswordValidationDirective implements Validator {
  @Input('first') first: string;
  @Input('second') second: string;

  constructor() {
  }

  public validate(ac: AbstractControl): { [key: string]: any } {
    console.log(ac.root);
    return null;
  }
}

1 个答案:

答案 0 :(得分:0)

终于找到了解决方案!我决定和NgModelGroup一起去。这是指令:

@Directive({
  selector: '[validateEqual][ngModelGroup]',
  providers: [
    {
      provide: NG_VALIDATORS,
      useExisting: forwardRef(() => PasswordValidationDirective),
      multi: true
    }
  ]
})
export class PasswordValidationDirective implements Validator {
  @Input('password') public password: string;
  @Input('confirmation') public confirmation: string;

  public validate(fg: FormGroup): { [key: string]: any } {
    const fieldOne = fg.value[this.password];
    const fieldTwo = fg.value[this.confirmation];

    if (!fieldOne || !fieldTwo || fieldOne === fieldTwo ) {
      return null;
    }

    return {valueEquals: false};

  }
}

这是HTML:

<div ngModelGroup="passwordGroup"
     #passwordGroup="ngModelGroup"
     validateEqual
     password="password"
     confirmation="passwordConfirmation">
  <div class="row">
    <div class="col-xs-6">
      <md-input-container class="full-width">
        <input mdInput
               type="password"
               required
               ngModel name="password"
               #password="ngModel"
               placeholder="{{'SIGNUP.PASSWORD' | translate}}">
      </md-input-container>
    </div>
    <div class="col-xs-6">
      <md-input-container class="full-width">
        <input mdInput
               type="password"
               required
               ngModel name="passwordConfirmation"
               #passwordConfirmation="ngModel"
               placeholder="{{'SIGNUP.RETYPE_PASSWORD' | translate}}">
      </md-input-container>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12">
      <md-error *ngIf="passwordGroup.errors">
        <span class="p-text-small-error">{{'SIGNUP.MATCH' | translate}}</span>
      </md-error>
    </div>
  </div>
</div>

这里的重要部分是指令本身和传入参数,可以根据自己的喜好进行修改。