Angular 验证器允许 null 或应用长度

Question

I have searched online but could not find a solution for this yet.

I have a update form for users and would like to apply a custom validator on the password control.

Password value should either be blank or its minLength should be greater than 4.

To double check that other fields are not causing trouble I have assigned default values to other fields

Form is initialised as shown below:

this.updateUserForm = this.fb.group({
    first_name: ['John', [Validators.required]],
    last_name: ['Doe', [Validators.required]],
    email: ['test@email.com', [Validators.required]],
    password: ['', [UpdatePasswordValidator.validPasswordOrEmpty]],
});

Custom validator:

import {FormControl} from '@angular/forms';

export class UpdatePasswordValidator {
    static validPasswordOrEmpty(fc: FormControl) {
        if (!fc.value || fc.value.length >= 4) {
            return null;
        }
        return ({validPasswordOrEmpty: true});
    }
}

Here is my html code, got rid of all other fields to debug.

<ion-list lines="full">
    <form [formGroup]="updateUserForm" (ngSubmit)="onUpdate()">

        <ion-item>
            <ion-label position="fixed">Password</ion-label>
            <ion-input formControlName="password" type="password"></ion-input>
        </ion-item>

        <ion-row>
            <ion-col>
                <ion-button [disabled]="!updateUserForm.valid" color="primary" shape="full" type="submit"
                            expand="block">Update User
                </ion-button>
            </ion-col>
        </ion-row>
    </form>
</ion-list>

Following is edit.page.ts

export class EditPage implements OnInit {

    updateUserForm: FormGroup;
    id: any;
    errors = null;

    constructor(
        public route: ActivatedRoute,
        public fb: FormBuilder
    ) {
        this.id = +this.route.snapshot.params.id;
        this.updateUserForm = this.fb.group({
            password: ['', UpdatePasswordValidator.validPasswordOrEmpty],
        });
    }
}    

Created the above custom validator but it does not allow empty value. when password value is blank updateUserForm.valid is always false.

What am I doing wrong here?

Thank you

Answer 1

form can be invalid because other fields can be invalid. To verify if that particular control is valid or not, use this.updateUserForm.controls.passowrd.isValid; Your custom validator function looks correct.