Angular Forms – Kara Erickson – AngularConnect 2017

What people said

Recommends Maksym Zavorotynskyi · 2017-12 · Stack Overflow · on “ERROR in : No provider for NgControl Angular AOT”

I am trying to implement a custom ControlValueAccessor as Kara Erickson recommended on last Angular Connect [this video] . To pass the validity state from the parent component to the child one. app.component.html: <app-country-select ngModel="model" name="country-select"></app-country-select> country-select.component.html: <select [formControl]="controlDir.control" #select placeholder="Country" i18n-placeholder (click)="onTouched()" (change)="onChange($event.value)" [required]="required"> <option value="at">Austria</option> <option value="au">Australia</option> </select> country-select.component.ts: @Component({ selector: 'app-country-select', templateUrl: './country-select.component.html', style

Recommends CodyBugstein · 2018-02 · Stack Overflow · on “My nested Angular reactive form is not getting the FormGroup from the parent component”

I came across Kara Erickson's demo of Angular forms at AngularConnect 2017, on YouTube. The part I'm specifically interested is where she describes nested reactive forms [this video] I've done everything as Kara describes, but I end up getting a null parentForm no matter what I try. I've reproduced a simplified version of my code below. The problem is that in the child-form component I am getting null . // PARENT COMPONENT @Component({ selector: 'parent-form', styleUrls: ['./parent-form.component.css'], template: ` <form [formGroup]="createAlbumProfileForm" (ngSubmit)="onFormSubmitted($event)"> <input type="text" placeholder="Something unique to parent form"/> <child-form></child-form> </form> `

Recommends Tomasz Kula · 2018-03 · Stack Overflow · on “setValidators in custom control without from reference in Angular”

If you want to access the FormControl inside a class that wants to implement the ControlValueAccessor you have to change your usual implementation. You cannot register the class as ControlValueAccessor in the providers array AND inject the FormControl in the constructor. Because the FormControl will try to inject your class, and you will try to inject the control, which will create a circular dependency. So the changes you need to make are as follows: Remove NG_VALUE_ACCESSOR and NG_VALIDATORS from the providers array. Inject NgControl in the constructor and set the control's ControlValueAccessor and Validators. constructor(@Self() ngControl: NgControl) { ngControl.valueAccessor = this; ngCo

Recommends Jesse · 2019-05 · Stack Overflow · on “How to get FormControl instance from ControlValueAccessor”

It looks like injector.get(NgControl) is throwing a deprecation warning, so I wanted to chime in with another solution: constructor(public ngControl: NgControl) { ngControl.valueAccessor = this; } The trick is to also remove NG_VALUE_ACCESSOR from the providers array otherwise you get a circular dependency. More information about this is in this talk by Kara Erickson of the Angular team [this video] .

Recommends Chellappan வ · 2020-03 · Stack Overflow · on “Change the css class of custom component from another component”

Since you using reactive form I have modified your custom form control. Here I have Use Injected NgControl Which is base class for all FormControl-based directives extend. Try this: import { Component, Input, forwardRef, OnInit } from "@angular/core"; import { ControlValueAccessor, NG_VALUE_ACCESSOR, NgControl, NG_VALIDATORS, FormControl, ValidationErrors, Validator } from "@angular/forms"; @Component({ selector: "app-my-input", templateUrl: "./my-input.component.html", styleUrls: ["./my-input.component.scss"] }) export class MyInputComponent implements ControlValueAccessor, OnInit { private propagateChange = (_: any) => {}; value = ""; onTouch: () => void; constructor(public controlDir: NgC

Recommends Gavi · 2020-05 · Stack Overflow · on “Angular ControlValueAccessor and markAsTouched”

Another chance is to use the following approach Custom control code @Component({ selector: 'cvl-advertising-type', templateUrl: './advertising-type.component.html', styleUrls: ['./advertising-type.component.scss'], }) export class AdvertisingTypeComponent implements OnInit, ControlValueAccessor { advertisingTypes: ReadonlyArray<LookupModel>; onChange = (value: number) => { }; onTouched = () => { }; constructor(private lookupService: LookupService, @Self() public controlDir: NgControl) { controlDir.valueAccessor = this; } ngOnInit(): void { this.advertisingTypes = this.lookupService.advertisingTypes; } registerOnChange(fn: (value: number) => void): void { this.controlDir.control.valueChanges.

Recommends Eric Liprandi · 2020-08 · Stack Overflow · on “How to get FormControl instance from ControlValueAccessor”

FWIW, her presentation is totally worth your time. But if you are looking for the specific `NgControl` bits it starts around 19:07 [this video]

Recommends Richard Hunter · 2020-11 · Stack Overflow · on “How to implement Form Projection in Angular?”

I have been trying to implement form projection in Angular in accordance with the talk given by Kara Erickson at Angular Connect in 2017, but so far without success. link to talk [this video] Unfortunately, the only code available appears in the slides and is incomplete so working it out is difficult. This is what I have attempted but it is throwing errors: [LINK] The idea of form projection is that you have some wrapper component whose template contains a <form> element and into which you project the form contents (the example in the talk is of a form stepper): <!-- FormStepper --> <form> <ng-content></ng-content> </form> <!-- containing template, e.g. AppComponent --> <form-stepper> <div ngMode

Recommends GreedyAi · 2021-02 · Stack Overflow · on “How to add validation in reusable reactive form”

I edited your stackblitz to demonstrate my following answer: stackblitz [LINK] It's better practice to use ControlValueAccessor to create custom formcontrols. check example from my project [LINK] of implementing custom formcontrol with validation. you will need to add providers both for validation and for ControlValueAccessor. providers: [ { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SkillFormComponent), multi: true, }, { provide: NG_VALIDATORS, useExisting: forwardRef(() => SkillFormComponent), multi: true, }, ], basically you component should implement ControlValueAccessor. Where you will need to implement these functions: writeValue registerOnChange registerOnTouched setDis

Cites Scott · 2018-03 · Stack Overflow · on “Angular composite forms submitted flag”

I am looking to create a composite form control using angular material controls (Shown at angular connect [this video] ). I am facing an issue with showing error messages on the individual controls once the entire outer form has been submitted. Material is using the parent form group directive to check if the form has been submitted or not and that drives whether error messages should be shown. For my composite form internalForm: FormGroup; // this form won't get submitted flag set to true when nested constructor(fb: FormBuilder) { this.internalForm = fb.group({ firstName: [], lastName:[] }); } <div [formGroup]="internalForm"> <mat-form-field> <input matInput placeholder="First name" formControlN