我似乎无法弄清楚为什么我的自定义验证器落后于字段值一步。示例:我的输入字段具有逐个输入的值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;
}
}
答案 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>
这里的重要部分是指令本身和传入参数,可以根据自己的喜好进行修改。