【[Angular2 Form] Nested formGroup, and usage of formGroupName】的更多相关文章

[Angular2 Form] Nested formGroup, and usage of formGroupName

We can nest formGorup: this.reactiveForm = fb.group({ username: [ '', [ Validators.required, Validators.minLength() ] ], pwds: fb.group({ pwd: '', rpwd: '' }, {validator: passwordValidator}) }); We make password as an own group. So in html, we need t…

[Angular2 Form] Create custom form component using Control Value Accessor

//switch-control component import { Component } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR, NG_VALIDATORS, Validators} from '@angular/forms'; @Component({ selector: 'switch-control', templateUrl: './switch-control.componen…

[Angular2 Form] Use RxJS Streams with Angular 2 Forms

Angular 2 forms provide RxJS streams for you to work with the data and validity as it flows out of the forms. These streams allow you handle complex scenarios and asynchronous scenarios with relative ease. This example shows you how to log out the va…

[Angular2 Form] Reactive Form, FormBuilder

Import module: import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { MessageComponent } from './message.component'; import messageRoutes from './message.routes'; import {FormsModule, ReactiveFormsModule} f…

[Angular2 Form] Reactive Form, show error message for one field

<form [formGroup]="reactiveForm" novalidate autocomplete="off"> <div class="form-field"> <label>Title:</label> <input formControlName="title"> <div class="field-error-message&qu…

[Angular2 Form] Reactive form: valueChanges, update data model only when form is valid

For each formBuild, formControl, formGroup they all have 'valueChanges' prop, which is an Observable. reactiveForm: FormGroup; video: Video; constructor(fb: FormBuilder) { this.reactiveForm = fb.group({ // title <-- formControlName="title" ti…

[Angular2 Form] Check password match

Learn how to create a custom validator to check whether passwords match. <h1>password match</h1> <form novalidate autocomplete="off" [formGroup]="signupForm"> <div class="form-field"> <label>Pass…

[Angular2 Form] patchValue, setValue and reset() for Form

Learn how to update part of form model, full form model and reset whole form. We have form definetion like this: reactiveForm: FormGroup; constructor(fb: FormBuilder) { this.extra = new FormControl('...', [ Validators.maxLength() ]); this.reactiveFor…

[Angular2 Form] Build Select Dropdowns for Angular 2 Forms

Select Dropdowns in Angular 2 a built with select and option elements. You use *ngFor to loop through your values and create options and use ngModel to keep track of the value as it changes. <form #formRef="ngForm"> <select name="l…

[Angular2 Form] Create Radio Buttons for Angular 2 Forms

Using Radio Buttons in Angular 2 requires a basic understanding of forms as well as how their labels will match up with each input. This lesson shows how to use *ngFor with radio buttons and covers the quirks of the id property and forattributes as w…