angular-reactive-forms

问题 I'm working on Angular reactive forms validation. I have an input with google autocomplete implemented on it: <input autocorrect="off" autocapitalize="off" spellcheck="off" type="text" class="input-auto input" formControlName="address"> It is standard implementation, everytime you enter some keyword, you get places suggestions: Now, what I would like to do is to validate the address. The address needs to contain zip code - only then should be valid . So once you type something and choose one

问题 I have a model driven form with 2 selects, 'State' and 'City'. The models looks something as below : class State{ stateID : number; stateName : String, cities : City[] } class City{ cityID : number, cityName : String } I am populating the city option list from the selection of state as I have all the data available in State[] 'stateList'. <select formControlName="state" (onchange)="getCityNameByState($event.target.value)"> <option *ngFor="let stateName of stateList" [value]= "stateID"> {

问题 I'm having trouble with nested FormArrays in Angular reactive forms. One of my form arrays correctly returns as a FormArray and the other returns as FormControl. In the initialMaterials() function I have two console.logs. console.log(control) returns a FormControl item and console.log(this.objectServiceJobsArray) returns a FormArray. I need to be able to add materials to specific jobs in the array and change them in the form when necessary. this.objectServiceForm = this.formBuilder.group({

问题 So I'm a little new to observables, I'm struggling with a scenario, and I thought it might be a good candidate for an SO question. Here we go... The scenario is this: I have a drop-down field; when it is changed, I want to check a condition based on the previous and new values of the field request from the user a confirmation if the condition passes, and ... then revert the value of the field if the user did not confirm. Here's the code with comments: ngOnInit(): void { // I am waiting for my

问题 I have a checkbox and input. What I want to do is to disable the input when the checkbox is checked, and enable the input when the checkbox is unchecked. This is my form group: this.workingTime = this.fb.group({ toggle: false, // this is the checkbox from: [{ value: null, disabled: false }], to: [{ value: null, disabled: false }] }); get toggleControl() { return this.workingTime.get('toggle'); } I was sure this will work: <input [disabled]="toggleControl.value"> But I'm getting a warning in

问题 Having a component that implements ControlValueAccessor , with internal FormGroup to maintain the state of custom form control. When any field, that's part of that FormGroup is disabled, the field isn't visible when calling .getRawValue() method in parent form . By specification, .getRawValue() should return the raw object, including disabled fields. I've checked the code of .getRawValue() and here's what I found: getRawValue(): any { return this._reduceChildren( {}, (acc: {[k: string]:

问题 If I tab through the text inputs without entering anything, the error msg divs display indicating that the required validator has fired correctly. However, if I type anything into one of the fields, the console immediately throws this error: Cannot read property 'required' of null Here is my component: import { PasswordValidators } from './../validators/password.validators'; import { Component, OnInit } from '@angular/core'; import { FormBuilder, Validators, FormGroup, FormControl } from '

问题 If I tab through the text inputs without entering anything, the error msg divs display indicating that the required validator has fired correctly. However, if I type anything into one of the fields, the console immediately throws this error: Cannot read property 'required' of null Here is my component: import { PasswordValidators } from './../validators/password.validators'; import { Component, OnInit } from '@angular/core'; import { FormBuilder, Validators, FormGroup, FormControl } from '

问题 I'am trying to describe the problem on an example (full example on stackblitz) If I try to place some parts of reactive-form in the form of simple "formControls" or "formGroups" withing child-components, there are no problems. (See the example on stackblitz above). FormGroupDirective works as expected. But If I try to place a FormArray within a child-component, I get troubles because of: <div [formGroupName]="i"> <!-- Error: formGroupName must be used with a parent formGroup directive. -->

问题 I'am trying to describe the problem on an example (full example on stackblitz) If I try to place some parts of reactive-form in the form of simple "formControls" or "formGroups" withing child-components, there are no problems. (See the example on stackblitz above). FormGroupDirective works as expected. But If I try to place a FormArray within a child-component, I get troubles because of: <div [formGroupName]="i"> <!-- Error: formGroupName must be used with a parent formGroup directive. -->