Question

我有一个如下的表单验证工作方案：

   <div class="col-sm-12 ">                        
                  <div class="form-group" formGroupName="rptrfirstName" >
                      <span>First Name / Given Name </span>
                      <div class="input-group" >                            
                      <input type="text" class="form-control " [(ngModel)]="reporterFName" formControlName="reporterFName"> 
                      <select class="form-control col-sm-3" style="padding-right: 2px;padding-right: 2px;"  [(ngModel)]="reporterFNameNV" formControlName="reporterFNameNV">     
                          <option [ngValue]="null">Select</option>
                         <option *ngFor="let fNameNv of fNameNvs" [value]="fNameNv.CODE"  >{{ fNameNv.CODE}}</option>  
                        </select>                            
                  </div>
                  <small class='text-danger' *ngIf="newReporterform.controls.rptrfirstName.hasError('bothEmpty') && notSubmitted ">
                      Please enter information in one of the above fields.
                   </small>
                   <small class='text-danger' *ngIf="newReporterform.controls.rptrfirstName.hasError('bothCaptured') && notSubmitted ">
                    Information is expected in any one of the above fields.
                 </small>
               </div>
              </div>

我在组件上应用了验证器：

 rptrfirstName: formBuilder.group({
                    reporterFName: new FormControl(''),
                    reporterFNameNV:new FormControl('')
                  }, {validator: [this.bothEmptyValidator, this.bothCapturedValidator]}) ,

由于我在应用程序中许多组件的许多组控件上都具有上述情况，因此我创建了以下用于全局用途的文件：

@Injectable()

export class FormErrors {

bothEmptyValidator: ValidatorFn = (fg: FormGroup) => {
    const KeyArray= Object.keys(fg.controls) 
    const ValuesArray= Object.values(fg.controls) 
    let field1 = ValuesArray[0].value;
    let field2 = ValuesArray[1].value;         
    return !field1 && !field2 ? {bothEmpty: true} : null;
}

bothCapturedValidator: ValidatorFn = (fg: FormGroup) => {    
    const KeyArray= Object.keys(fg.controls) 
    const ValuesArray= Object.values(fg.controls) 
    let field1 = ValuesArray[0].value;
    let field2 = ValuesArray[1].value;           
    return field1 && field2 ? {bothCaptured: true} : null;
}
getEmptyMessage() {
         return 'Please enter information in one of the above fields.';  
  }
getBothCapturedMessage() {
    return 'Information is expected in any one of the above fields.';  
}  
}.

我正在通过组件的上述构造函数注入HTML，并且修改后的HTML如下：

 <small class='text-danger' *ngIf="newReporterform.controls.rptrTitle.hasError('bothEmpty') && notSubmitted ">{{_fmError.getEmptyMessage()}}                    </small>
<small class='text-danger' *ngIf="newReporterform.controls.rptrTitle.hasError('bothCaptured') && notSubmitted ">{{_fmError.getBothCapturedMessage()}}
                      </small>

我已经观察到验证第一次可以正常工作（无论是空的还是捕获的条件）。但是，当我尝试对数据输入进行连续更改时，验证毫克会被不正确地抛出... 已经注意到，如果我按照本文开头部分中提到的那样用HTML部分处理组件级别的验证，则验证消息是完美且准确的。

我希望保留我的代码没有冗余，因此是全局验证器。任何帮助都将受到高度赞赏

表单验证-全局应用（行为不一致）

0 个答案: