Удалить валидатор из группы formBuilder - PullRequest
Новая
       27

Удалить валидатор из группы formBuilder

0 голосов
/ 20 марта 2019

Я использую 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.

...