Question

我有一个场景，我需要在组级别以及组内的单个控制级别上应用验证。我发现有一些问题。我的模型定义：

public numericNumberReg= '^-?[0-9]\\d*(\\.\\d{1,2})?$';

this.editReporterform = this.formBuilder.group({
    testphone: new FormControl('', [Validators.pattern(this.numericNumberReg),Validators.maxLength(14)]),
    email: new FormControl('', [Validators.email]),
    PHONE_INFO: formBuilder.group({
      PHONE: new FormControl('', [Validators.pattern(this.numericNumberReg),Validators.maxLength(14)]),
      PHONE_NV: ''
    }, { validator: [this.bothEmptyValidator,this.bothCapturedValidator] }),
  }
  )

我的HTML：

     <form [formGroup]="editReporterform" (ngSubmit)="onSubmit()">
      <div class="col-md-12">
        <div class="card">
          <div class="card-header text-uppercase  font-weight-bold">
            Testing page
          </div>
          <div class="card-body">
            <div class="row">
              <div class="col-sm-12">
                <span>testphone - single</span>
                <input type="text" class="form-control" formControlName="testphone">
                <small class='text-danger' *ngIf="editReporterform.controls.testphone.errors">Invalid Phone Number
                </small>
              </div>
              <div class="col-sm-12">
                <div class="form-group" formGroupName="PHONE_INFO">
                  <span>Phone - group</span>
                  <div class="input-group">
                    <input type="text" class="form-control" formControlName="PHONE">

                    <select class="form-control col-sm-3" style="padding-right: 2px;" formControlName="PHONE_NV">
                      <option value="">Select</option>
                      <option *ngFor="let phoneNv of phoneNvs" [value]="phoneNv.CODE">{{ phoneNv.CODE}}</option>
                    </select>
                  </div>
  <small class='text-danger'
              *ngIf="editReporterform.controls.PHONE_INFO.errors.PHONE">Invalid Phone Number  </small>
                  <small class='text-danger'
                    *ngIf="editReporterform.controls.PHONE_INFO.hasError('bothEmpty')">Please enter information in any one of the above fields.
                  </small>
                  <small class='text-danger'
                    *ngIf="editReporterform.controls.PHONE_INFO.hasError('bothCaptured') ">Please empty one of the above fields as applicable.
                  </small>
                </div>
              </div>
              <div class="col-sm-12">
                <div class="form-group">
                  <span>Email </span>
                  <div class="input-group">
                    <input type="email" class="form-control" formControlName="email">
                  </div>
                  <small class='text-danger' *ngIf=" editReporterform.controls.email.errors ">Invalid Email.Pls
                    correct</small>
                </div>

              </div>
            </div>
          </div>
          <div class="card-footer">
            <div class="row">
              <div class="col-sm-12">
                <button type="button" class="btn  btn-primary"><i class="fa fa-edit"></i>Edit</button>
                <button type="button" class="btn  btn-success"><i class="fa fa-save"></i>Save</button>
                <!-- <button type="button" class="btn  btn-warning" style="width: 10%;" >Delete</button>             -->
                <button type="button" class="btn  btn-danger" (click)="goBack()"><i class="fa fa-close"></i>Close</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </form>

组级验证者为：

    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;
       }

问题是我无法使用在“ PHONE”控件上应用的Validators.pattern（this.numericNumberReg）来验证组中输入的电话号码是否有效。但是，当不带分组单独应用时，它可以很好地工作（即，“ testphone”的行为也是我对“ PHONE”的期望）。

任何帮助都受到高度赞赏... ASJ

响应式表单组验证-两级验证（个人和组级别）

0 个答案: