angular-reactive-forms

Topic: Angular 6, Reactive Form, DropDown Menu, Disable One Option: all instead of just the one intended value are disabled, even though the inspector says disabled=false. People were very kind to help me with my problem earlier: " Angular 6 Reactive Form - Select options: disable previously selected options " but they seemed to disappear after I hit a roadblock, hence my new question: Why are ALL option values disabled instead of just the one that is supposed to match the statement? [attr.disabled]="uplink2x === dropdown1Val" (even if I hardcode nic0 instead of dropdown1Val all options are

I'm using Angular 4.4.3 reactive forms to implement custom validation for a group of controls in a form. The method AbstractControl.setErrors , according to docs updates the errors property of the AbstractControl, upon which it's invoked, updates the status of its parent, but not the parents errors property. I wanted to set the errors property on a FormGroup instance, so I use the setErrors inherited by the FormGroup. However, it does not update errors as expected. Following is my sample code: Trying it on FormControl instances, does update their errors as well as their parents' validity

is there a way to create a reactive form basing on an existing data model with all the validation magic. In the example below author passes whole new object into a formbuilder but what I want to achieve is elegant way to tell formbuilder what field is required or needs some other validation. https://malcoded.com/posts/angular-fundamentals-reactive-forms export class PersonalData { email: string = ''; mobile: string = ''; country: string = ''; } ... createFormGroupWithBuilderAndModel(formBuilder: FormBuilder) { return formBuilder.group({ personalData: formBuilder.group(new PersonalData()),

I have one custom control component <some-input> that i wrapped to <ext-some-input> . SomeInput is encapsulated, has own API and supports reactive forms. ExtSomeInput is created as high-level wrapper over SomeInput . I have following html: <form [formGroup]="form"> <ext-some-input formControlName="name"> </form> and ExtSomeInput 's html: <some-input formControlName="_???_"></some-input> The question is how to forward formControlName to inner SomeInput component? I need to tie the form and inner formControl up. Is this possible? EDITED: I've created stackblitz project with this issue: here Your

I want to auto save content in reactive form when form is valid without clicking save button. You will want to subscribe to the statusChanges() method of your FormGroup, and in that Observable you can determine whether the FormGroup is valid and then trigger a save event. import 'rxjs/add/operator/takeWhile'; import { FormBuilder, FormGroup } from '@angular/forms'; @Component({...}) export class MyComponent { private form: FormGroup; private alive: boolean; constructor(private formBuilder: FormBuilder) {} public ngOnInit(): void { this.alive = true; this.form = this.formBuilder.group({ // your

I have multiple (any number) dropdowns on the form that i need to build dynamically. All these must have a value selected, so need to apply required validator. Sample json [ { "FeatureCaption": "Style", "SelectedValue": "shaker", "FeatureList": [ { "FeatureId": "CHOOSE", "FeatureName": "Choose", "IsSelected": true }, { "FeatureId": "shaker", "FeatureName": "Shaker", "IsSelected": false } ] }, { "FeatureCaption": "Material", "SelectedValue": "std", "FeatureList": [ { "FeatureId": "CHOOSE", "FeatureName": "Choose", "IsSelected": true }, { "FeatureId": "std", "FeatureName": "Standard",

Let's say that I have this form structure: this.entryForm = this.formBuilder.group({ date: [{value:'' , disabled: true}, [Validators.required]], notes: [''], sum_credit: [{value:'', disabled: true }], sum_debit: [{value:'', disabled: true}], items: this.initItems() }); // set validation function to sum_credit this.entryForm.controls['sum_credit'].setValidators([CommonValidations.validateSomthing(...)]); The sum_credit is disabled because it's value is always calculated. Now I need to validate that the sum_credit is equaled to sum_debit , and I'm already doing that using validateSomthing