angular-forms

Create a reusable FormGroup

人走茶凉 提交于 2019-11-27 19:10:39
I am aware of creating custom controls as components, but I can't figure out how to create custom groups . The same we can do this by implementing ControlValueAccessor and using a custom component like <my-cmp formControlName="foo"></my-cmp> , how can we achieve this effect for a group ? <my-cmp formGroupName="aGroup"></my-cmp> Two very common use-cases would be (a) separting a long form into steps, each step in a separate component and (b) encapsulating a group of fields which appear across multiple forms, such as address (group of country, state, city, address, building number) or date of

Angular2 If ngModel is used within a form tag, either the name attribute must be set or the form

拜拜、爱过 提交于 2019-11-27 17:18:50
I am getting this error from Angular 2 core.umd.js:5995 EXCEPTION: Uncaught (in promise): Error: Error in app/model_exposure_currencies/model_exposure_currencies.component.html:57:18 caused by: If ngModel is used within a form tag, either the name attribute must be set or the form control must be defined as 'standalone' in ngModelOptions. Example 1: <input [(ngModel)]="person.firstName" name="first"> Example 2: <input [(ngModel)]="person.firstName" [ngModelOptions]="{standalone: true}"> <td *ngFor="let lag of ce.lags"> <div class="form-group1"> <input name="name" [(ngModel)]="lag.name"

Angular2 Reactive Forms formControl for radio buttons

﹥>﹥吖頭↗ 提交于 2019-11-27 15:31:28
问题 I'm building a form in Angular with Reactive Forms. I'm using the FormBuilder to make a group of fields. For textboxes this works extremely well. But I can't find a formControl for radio buttons. How does this work? Should I use <input formControlName="gender" type="radio"> just like I use with text input's? 回答1: Should I do <input formControlName="gender" type="radio"> just like I do with text input's? Yes. How does this work? Form control directives use a ControlValueAccessor directive to

Angular 2: Form submission canceled because the form is not connected

孤街浪徒 提交于 2019-11-27 11:51:28
问题 I have a modal that contains a form, when the modal is destroyed I get the following error in the console: Form submission canceled because the form is not connected The modal is added to a <modal-placeholder> element which is a direct child to <app-root> , my top level element. What's the correct way to removing a form from the DOM and getting rid of this error in Angular 2? I currently use componentRef.destroy(); 回答1: There might be other reasons this occurs but in my case I had a button

Enable When Checkbox is Check in Reactive Forms

放肆的年华 提交于 2019-11-27 08:24:08
问题 I need help in making the rows enable only when the checkbox is check. The default rows should be disabled but when the checkbox is only check, that row will be enabled. Here's the link to my code LINK CODES patchValues() { let rows = this.myForm.get('rows') as FormArray; this.orders.forEach(material => { material.materials.forEach(x => { rows.push(this.fb.group({ checkbox_value: [null], material_id: new FormControl({value: x.id, disabled: true}, Validators.required), material_name: x.name,

angular 5 template forms detect change of form validity status

牧云@^-^@ 提交于 2019-11-27 05:42:42
问题 are reactive forms the way to go in order to have a component that can listen for changes in the validity status of the form it contains and execute some compoment's methods? It is easy to disable the submit button in the template using templateRef like [disabled]="#myForm.invalid" , but this does not involve the component's logic. Looking at template forms' doc I did not find a way 回答1: If you want to get only the status and not the value you can use statusChanges : export class Component {

Can't bind to 'formControl' since it isn't a known property of 'input' - angular2 material Autocomplete issue

ε祈祈猫儿з 提交于 2019-11-27 05:07:39
问题 I am trying to use angular material autocomplete component in my angular2 project. I added following to my template. <md-input-container> <input mdInput placeholder="Category" [mdAutocomplete]="auto" [formControl]="stateCtrl"> </md-input-container> <md-autocomplete #auto="mdAutocomplete"> <md-option *ngFor="let state of filteredStates | async" [value]="state"> {{ state }} </md-option> </md-autocomplete> Following is my component. import {Component, OnInit} from "@angular/core"; import

Detect if data in form was changed

六眼飞鱼酱① 提交于 2019-11-27 04:49:34
问题 I have Angular form (not reactive), with data binded in ngModel: <form #form="ngForm"> <input [(ngModel)]="user.name"> <input [(ngModel)]="user.color"> <button type="submit">Save</button> </form> How can i disable submit button if binded data has not been changed? 回答1: do this , check for dirty flag, which tells form dirty or not <button type="submit" [disabled]="!form.dirty">Save</button> form becomes dirty if you change some value in it. Check here for detail : https://angular.io/guide

Angular form validation: compare two fields

二次信任 提交于 2019-11-27 03:36:21
问题 In an Angular 4 application, how can I validate two fields of a form doing a comparison? For example, let's suppose that my form has a startDate and an endDate date fields and I want to make sure that the endDate must be bigger than the startDate . 回答1: When you want to implement validations containing one or more sibling (form)controls, you have to define the validator function on a level up/above that of the sibling controls. For ex: ngOnInit() { this.form = this.formbuilder.group({

Confirm password validation in Angular 6

百般思念 提交于 2019-11-27 01:18:54
I want to perform password and confirm password validations using material components only,and an error message below the confirm password field if confirm password field doesn't match And if it is empty .Tried many resources unable to achieve. Tried this video too. This is the material component i am looking for HTML <mat-form-field > <input matInput placeholder="New password" [type]="hide ? 'password' : 'text'" [formControl]="passFormControl" required> <mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility' : 'visibility_off'}}</mat-icon> <mat-error *ngIf="passFormControl.hasError(