It's Just a Textbox, What Could Go Wrong?: Angular 2 Forms and Validation - Deborah Kurata
Why Stack Overflow recommends it
Stack Overflow users link it when answering Angular 2 form validation questions, especially about reactive (model-driven) forms and cleaner error handling.
Recommended by 3 people across 3 different months, 2016 to 2016.
What it is
A 20-minute ng-conf 2016 conference talk by Deborah Kurata on building forms and validation in Angular 2. It covers template-driven versus model-driven forms and how to structure validation logic so a simple textbox doesn't become messy.
What people said
Strong rec Harry Ninh · 2016-09 · Stack Overflow · on “Angular 2 reactive form verbose validation”
You can define a property in your ts file to hold of that FormControl : usernameFc: FormControl; //.... ngOnInit() { this.usernameFc= this.fb.control('', Validators.compose([ Validators.required, Validators.minLength(3), UsernameValidators.cannotContainSpace]), UsernameValidators.shouldBeUnique); this.form = this.fb.group({ 'username': this.usernameFc, 'password': ['', Validators.required] }); } Then in your template, use usernameFc instead of form.controls['username'] : <div class="alert alert-danger" *ngIf="usernameFc.hasError('required')"> Username is required </div> However, as all your reference to the form control is for showing errors, I'd strongly recommend you to watch this talk [VI
Recommends DeborahK · 2016-06 · Stack Overflow · on “angular 2 how to check if control is visible or not”
If you use the model-driven approach to building a form, you control when/how the validation is executed. There is a video on how to do this here: [this video]
Recommends Günter Zöchbauer · 2016-06 · Stack Overflow · on “Angular2 Validations for input fields”
Angular does handle the validation. Just put your <input> inside a <form> tag. For more details see [LINK] I also found [this video] quite helpful.
Recommends Harry Ninh · 2016-08 · Stack Overflow · on “How to perform form validations in angular2”
If you have 20 minutes, this talk will help A LOT in how you design forms & validations: [this video] The code may be outdated but the concept still remains relevant until RC5.
Cites cobolstinks · 2016-06 · Stack Overflow · on “Angular2 Form How to Get Specific Error Type?”
I 'm trying to hide/show the appropriate error message if the given field is empty,too short, or too long. Here is a portion of my form: <form #applicationForm="ngForm" (ngSubmit)="saveApplication()" class="form-horizontal"> <div class="row-fluid"> <div [class.has-error]="name.touched && name.errors" class="form-group"> <label for="name" class="col-sm-2 control-label form-lbl">Name</label> <div class="col-sm-10"> <input type="text" class="form-control" placeholder="Name" minlength="8" maxlength="200" required [(ngModel)]="application.Name" ngControl="name" #name="ngForm"> <p *ngIf="name.errors.minlength" class="help-block">Name is too short, it must be at least 8 characters.</p> <p *ngIf="na