从formBuilder组中删除验证器

Question

我正在使用formBuilder，并且想要删除一组电话号码上的自定义验证器。当我调用removeValidator时，它失败了。

表单初始化

this.paInfoForm = this.formBuilder.group({
    paFirstName: ['', [Validators.required]],
    paLastName: ['', [Validators.required]],
    paEmail: ['', [Validators.required, Validators.email]],
    paGroupPhoneNumber: this.formBuilder.group({
        paHomeNumber: ['', [ Validators.pattern('^[2-9]\\d{2}-\\d{3}-\\d{4}$|^[0-9]{10}$') ]],
        paPhoneNumber: ['', [ Validators.pattern('^[2-9]\\d{2}-\\d{3}-\\d{4}$|^[0-9]{10}$') ]],
    },{
        validator: phoneNumberValidate
    })
})

自定义验证器

export function phoneNumberValidate(c: AbstractControl) {
    let v = c.value
    let paPhoneNumber = v.paPhoneNumber
    let paHomeNumber = v.paHomeNumber
    if (!paPhoneNumber && !paHomeNumber) {
        return { required: true }
    }

    return null
}

删除验证器

this.removeValidator('paGroupPhoneNumber')

HTML代码

<div class="col-6">
    <div class="form-group form-group-v3">
        <div class="msg-input">
            <label 
                [class.error]="(paInfoForm.hasError('required','paGroupPhoneNumber') && submitted)"
                [class]="paInfoForm.value.paGroupPhoneNumber.paHomeNumber ? 'active': '' " for="home-number">Home
                number *</label>
            <input 
                [class.error]="(paInfoForm.hasError('required','paGroupPhoneNumber') && submitted)"
                formControlName="paHomeNumber" type="text" class="form-control" id="home-number" name="home-number"
                placeholder="">
            <div class="messages-error d-block">
                <div *ngIf="paInfoForm.get('paGroupPhoneNumber.paHomeNumber')?.errors?.pattern && (submitted || paInfoForm.get('paGroupPhoneNumber.paHomeNumber')?.dirty )">
                Home number is invalid</div>
            </div>
        </div>
        <span class="middle-text-or">or</span>
    </div>
</div>

<div class="col-6">
    <div class="form-group form-group-v3">
        <div class="msg-input">
            <label 
                [class.error]="(paInfoForm.hasError('required','paGroupPhoneNumber') && submitted)"
                [class]="paInfoForm.value.paGroupPhoneNumber.paPhoneNumber ? 'active': '' " for="phone-number">Phone
                number *</label>
            <input 
                [class.error]="(paInfoForm.hasError('required','paGroupPhoneNumber') && submitted)"
                formControlName="paPhoneNumber" type="text" class="form-control" id="phone-number" name="phone-number"
                placeholder="">
            <div class="messages-error d-block">
                <div *ngIf="paInfoForm.get('paGroupPhoneNumber.paPhoneNumber')?.errors?.pattern && (submitted || paInfoForm.get('paGroupPhoneNumber.paPhoneNumber')?.dirty )">
                Phone number is invalid</div>
                <div *ngIf="paInfoForm.hasError('required','paGroupPhoneNumber') && (submitted || paInfoForm.get('paGroupPhoneNumber.paPhoneNumber')?.dirty || paInfoForm.get('paGroupPhoneNumber.paHomeNumber')?.dirty)">
                This field is required </div>                                                        
            </div>
        </div>
    </div>
</div>

自定义验证器的内容似乎无关紧要，因为无论那里有什么，removeValidator都不起作用。我可以删除paHomeNumber和paPhoneNumber上的验证器。