Angular Form Validation - KARA ERICKSON

By: ng-conf

127   0   9292

Uploaded on 04/07/2017

www.ng-conf.org

ng-conf is a two day, single track conference focused on delivering the highest quality training in the Angular JavaScript framework. 500 to 700 Developers from across the country will converge on beautiful Salt Lake City, UT to participate in training sessions by the Google Angular team, and other Angular experts. In addition to the invaluable training, ng-conf will deliver a premier conference experience for attendees, providing opportunities to network with other developers, relax at social events, and engage in some of the unique entertainment opportunities available in Utah.

Comments (5):

By anonymous    2017-09-20

Is there a better / less verbose / already built-in way to do this?

for now, Angular Form does not support yet. create custom validator is great solution.

future: yeap, it's coming, please watch this talk https://youtu.be/kM5QBOWrUVI?t=16m18s

Original Thread

By anonymous    2017-09-20

The official way of getting what you want is in upcoming features to form validation.

https://youtu.be/kM5QBOWrUVI?t=9m48s

However, you can manually debounce validation by subscribing to value changes, and setting your own error.

testForm.controls['name'].valueChanges
.do(
    res => {
        if (res) {
            this.testForm.controls['name'].setErrors({loading: true});
        }
    }
)
.debounceTime(500)
.subscribe(
    res => {
        if (this.nameSub) {
            this.nameSub.unsubscribe();
            this.nameSub = null;
        }

        this.nameSub = this.http.get(apiURL + 'exist/?name=' + res).subscribe(
            exists => {
                this.testForm.controls['name'].setErrors({nameExists: true});
                this.nameSub.unsubscribe();
                this.nameSub = null;
            },
            error => {
                if (res) {
                    this.testForm.controls['name'].setErrors(null);
                }
                this.nameSub.unsubscribe();
                this.nameSub = null;
            }
        );
    },
    error => {}
);

Original Thread

By anonymous    2018-03-26

What you are looking for is an async validator.

Check out this video by Kara Erickson (angular core team member, responsible for @angular/forms) on angular form validation.

Angular Form Validation - Kara Erickson

Original Thread

Popular Videos 458

Submit Your Video

If you have some great dev videos to share, please fill out this form.