I am trying to build a reusable field component for reactive form but I am unable to get a value from custom-input component.
<form [formGroup]="form" (ngSubmit)="submit()">
<custom-input id="name" name="name" formControlName="name"></custom-input>
<button type="submit" name="button">Submit</button>
</form>
My custom input reusable componeent
import { Component, OnInit, Input } from '#angular/core';
import { FormControl } from "#angular/forms";
#Component({
selector: 'custom-input',
template: '<input type="text" [class]="class" [id]="id" [name]="name" [formControlName]="formControlName">',
styles: []
})
export class CustomInputComponent implements OnInit {
#Input() public id: string;
#Input() public class: string;
#Input() public name: string;
#Input() public formControlName: string;
constructor() { }
ngOnInit() {
}
}
You can implement ControlValueAccessor, but might not want to re-implement the methods for the native input. In order to do that, you can use the FormControlDirective to get access to valueAccessor.
formControl and formControlName are added as input properties, so it will work in both cases. If formControlName is provided, the instance of FormControl will be retrieved from the ControlContainer.
#Component({
selector: 'app-custom-input',
template: `<input type="text" [formControl]="control">`,
styleUrls: ['./custom-input.component.scss'],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: CustomInputComponent,
multi: true
}
]
})
export class CustomInputComponent implements ControlValueAccessor {
#Input() formControl: FormControl;
#Input() formControlName: string;
#ViewChild(FormControlDirective, {static: true})
formControlDirective: FormControlDirective;
private value: string;
private disabled: boolean;
constructor(private controlContainer: ControlContainer) {
}
get control() {
return this.formControl || this.controlContainer.control.get(this.formControlName);
}
registerOnTouched(fn: any): void {
this.formControlDirective.valueAccessor.registerOnTouched(fn);
}
registerOnChange(fn: any): void {
this.formControlDirective.valueAccessor.registerOnChange(fn);
}
writeValue(obj: any): void {
this.formControlDirective.valueAccessor.writeValue(obj);
}
}
Source: https://medium.com/angular-in-depth/dont-reinvent-the-wheel-when-implementing-controlvalueaccessor-a0ed4ad0fafd
Related
I am trying to disable the male radio button without use id. and using the angular rendering2. but not working.
without a change in html.only change in form.ts file
form.html
<label>
<input type="radio" value="male" formControlName="gender">
<span>male</span>
</label>
<label>
<input type="radio" value="female" formControlName="gender">
<span>female</span>
</label>
</form>
form.ts
import { Component, OnInit , Renderer2, ElementRef, ViewChild} from '#angular/core';
import { FormGroup, FormBuilder, Validators } from '#angular/forms';
import * as $ from 'jquery';
#Component({
selector: 'app-reg-form',
templateUrl: './reg-form.component.html',
styleUrls: ['./reg-form.component.css']
})
export class RegFormComponent implements OnInit {
form: FormGroup;
#ViewChild('gender', {static: false}) Input: ElementRef;
constructor(fb: FormBuilder, private renderer: Renderer2) {
this.form = fb.group({
gender: ['male', [Validators.required]]
});
}
ngOnInit() {
this.renderer.setProperty(this.Input, 'disabled', 'true');
}
}
Why dont use disable using component variable like this
<input type="radio" name="disabled" [attr.disabled]="isDisabled" />
And in your component
export class RegFormComponent implements OnInit {
form: FormGroup;
isDisabled: boolean;
#ViewChild('gender', {static: false}) Input: ElementRef;
constructor(fb: FormBuilder, private renderer: Renderer2) {
this.form = fb.group({
gender: ['male', [Validators.required]]
});
}
ngOnInit() {
this.renderer.setProperty(this.Input, 'disabled', 'true');
this.isDisabled = false;
}
}
I'm not sure how can I use a custom component if it's wrapper under another component.
Like:
ComponentA_withForm
|
--ComponentA1_withWrapperOfCustomInput
|
--ComponentA11_withCustomInput
if I have a structure like this:
ComponentA_withForm
|
--ComponentA11_withCustomInput
Everything's fine
But for my case (tons of async data) I need a wrapper... Is it possible somehow to do this?
Here is my fiddle code:
ComponentA:
import { Component } from '#angular/core';
import { FormBuilder } from '#angular/forms';
#Component({
selector: 'my-app',
template: `<form [formGroup]="form"><custom-input-wrapper formControlName="someInput"></custom-input-wrapper></form> <p>value is: {{formVal | json}}</p>`
})
export class AppComponent {
form = this.fb.group({
someInput: [],
});
get formVal() {
return this.form.getRawValue();
}
constructor(private fb: FormBuilder) { }
}
ComponentA1:
import { Component } from '#angular/core';
#Component({
selector: 'custom-input-wrapper',
template: '<custom-input></custom-input>',
})
export class CustomInputWrapperComponent {
constructor() { }
}
ComponentA11:
import { Component, forwardRef } from '#angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '#angular/forms';
#Component({
selector: 'custom-input',
template: `Hey there! <button (click)="inc()">Value: {{ value }}</button>`,
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => CustomInputComponent),
multi: true,
}],
})
export class CustomInputComponent implements ControlValueAccessor {
private value = 0;
writeValue(value: number): void {
this.value = value;
}
registerOnChange(fn: (_: any) => void): void {
this.onChangeFn = fn;
}
registerOnTouched(fn: any): void {
}
inc() {
this.value = this.value + 1;
this.onChangeFn(this.value);
}
onChangeFn = (_: any) => { };
}
And here I have a working sample:
https://stackblitz.com/edit/angular-qmrj3a
so: basically removing & refactoring code not to use CustomInputWrapperComponent makes my code working. But I need this wrapper and I'm not sure how to pass formControlName then.
I don't want a dirty solution with passing parent formGroup :)
Since you don't want a dirty solution ;) , you could just implement ControlValueAccessor in the CustomInputWrapperComponent also. That way any change in the parent will be reflected in the child, any change in the child will be reflected in the parent as well with just few lines of code.
Wrapper Component
#Component({
selector: 'custom-input-wrapper',
template: '<custom-input [formControl]="value"></custom-input>',
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => CustomInputWrapperComponent),
multi: true,
}]
})
export class CustomInputWrapperComponent implements AfterViewInit, ControlValueAccessor {
public value = new FormControl();
constructor() { }
ngAfterViewInit() {
this.value.valueChanges.subscribe((x) => {
this.onChangeFn(x);
});
}
writeValue(value: number): void {
this.value.setValue(value);
}
registerOnChange(fn: (_: any) => void): void {
this.onChangeFn = fn;
}
registerOnTouched(fn: any): void {
}
onChangeFn = (_: any) => { };
}
Parent Template
<form [formGroup]="form"><custom-input-wrapper formControlName="someInput"></custom-input-wrapper></form> <p>value is: {{formVal | json}}</p>
I have made a stackbitz demo here - https://stackblitz.com/edit/angular-csaxcz
you cannot use formControlName on custom-input-wrapper because it doesn't implement ControlValueAccessor. implementing ControlValueAccessor on custom-input-wrapper might be a solution but it seems to be overkill. Instead pass the control from formGroup to custom-input-wrapper as an #Input() and pass the inputed formControl to custom-input
app.component
#Component({
selector: 'my-app',
template: `<form [formGroup]="form"><custom-input-wrapper [formCtrl]="form.get('someInput')"></custom-input-wrapper></form> <p>value is: {{formVal | json}}</p>`
})
export class AppComponent {
form = this.fb.group({
someInput: [],
});
get formVal() {
return this.form.getRawValue();
}
constructor(private fb: FormBuilder) { }
}
custom-input-wrapper.component
#Component({
selector: 'custom-input-wrapper',
template: '<custom-input [formControl]="formCtrl"></custom-input>',
})
export class CustomInputWrapperComponent {
#Input() formCtrl: AbstractControl;
constructor() { }
}
here is a working demo https://stackblitz.com/edit/angular-3lrfqv
I create a custom input and other generic element
and at that point I want to bind it to reactive forms. Now I got null as value.
HTML
<label for="name">
<span>{{title}}</span>
<input type="text" name="name" formControlName="name">
</label>
Component
export class AppInputComponent implements OnInit {
#Input() name: string;
#Input() title?: string;
#Input() form: FormGroup;
#Input() options?: Array<string>;
constructor() { }
ngOnInit() {
}
}
This one have its own module file
#NgModule({
declarations: [
GFormsFields.AppTextboxComponent,
GFormsFields.AppSelectComponent,
GFormsFields.AppInputComponent,
GFormsFields.AppCheckboxComponent
],
imports: [
CommonModule,
BrowserModule,
],
exports: [
GFormsFields.AppTextboxComponent,
GFormsFields.AppSelectComponent,
GFormsFields.AppInputComponent,
GFormsFields.AppCheckboxComponent
],
providers: [],
bootstrap: []
})
And now I want to bind it to place where I create the reactive form.
HTML
<form [formGroup]="reactiveForms" (ngSubmit)="onSubmit()">
<app-app-input [title]="'First Name Dude'" [name]="'firstName'" [form]="'form'"></app-app-input>
<button type="submit" [disabled]="!reactiveForms.valid">Submit</button>
</form>
Component
import { Component } from '#angular/core';
import { FormGroup, FormControl } from '#angular/forms'
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
reactiveForms = new FormGroup({
name: new FormControl
});
onSubmit(): void {
console.log(this.reactiveForms);
}
}
How can I pass from this custom input to app (it's as test purpose. This will be nested at other component).
What did I do wrong?
change AppInputComponent.html like this :
<label for="name">
<span>{{title}}</span>
<input type="text" name="name" [formControl]="form.controls.name">
</label>
and use component like this :
<app-app-input [title]="'First Name Dude'" [name]="'firstName'" [form]="reactiveForms"></app-app-input>
===============================
with above changes your problem will be solved but i would suggest u extra changes for better design .
change AppInputComponent.ts like this :
export class AppInputComponent implements OnInit {
#Input() name: string;
#Input() title?: string;
#Input() nameControl: FormControl;
#Input() options?: Array<string>;
constructor() { }
ngOnInit() {
}
}
change AppInputComponent.html like this :
<label for="name">
<span>{{title}}</span>
<input type="text" name="name" [formControl]="nameControl">
</label>
and finally use it like this :
<app-app-input [title]="'First Name Dude'" [name]="'firstName'" [nameControl]="reactiveForms.controls.name"></app-app-input>
AppInputComponent only needs FormControl of "name" not whole FormGroup . so it is not a good design to pass the entire FormGroup .
I have a custom text-area component, with text-area input inside. I have created a custom validator to check the max length (not the html one) of the text.
All work fine, the problem is that the inner input is set to invalid (with ng-invalid) while che component itself don't and so also the form that contains the component remains valid.
It's seems to work with the built-it required validator, placed on both the component and the input.
How can I make the changes in a custom input to be reflected on the external form?
Thanks!
//sorry for my english!
Edit: I made a plunker: https://plnkr.co/edit/NHc25bo8K9OsgcxSWyds?p=preview
This is the custom text-area component html:
<textarea
[disabled]='disabled'
[required]='required'
[placeholder]="placeholder"
(changes)="onInput($event)"
(keyup)="onInput($event)"
[(ngModel)] = "data"
[name]="name"
#input="ngModel"
customMaxLength="{{maxLength}}"
></textarea>
<span *ngIf="input.errors && (input.dirty || input.touched)">
<span *ngIf="input.errors?.required" class="error-message">Required!</span>
<span *ngIf="input.errors?.customMaxLength" class="error-message">Max Length Reached({{maxLength}})</span>
</span>
This is the code of the component
import { Component, Input, forwardRef, ViewChild } from '#angular/core';
import { NgModel, ControlValueAccessor, NG_VALUE_ACCESSOR, AbstractControl } from '#angular/forms';
#Component({
selector: 'custom-text-area',
templateUrl: './custom-text-area.component.html',
styleUrls: ['./custom-text-area.component.less'],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => TextAreaComponent),
multi: true
}
]
})
export class TextAreaComponent implements ControlValueAccessor{
#Input() required = false;
#Input() name;
#Input() data;
#Input() disabled;
#Input() placeholder = '';
#Input() errorMsg;
#Input() maxLength = null;
#ViewChild('input') input: NgModel;
constructor() {
this.data = '';
}
propagateChange = (_: any) => {};
writeValue(value: any): void {
if (value !== undefined) {
this.data = value;
} else {
this.data = '';
}
}
registerOnChange(fn: any): void {
this.propagateChange = fn;
}
registerOnTouched(fn: any): void {}
setDisabledState?(isDisabled: boolean): void {
this.disabled = isDisabled;
}
onInput(e) {
this.data = e.target.value || '';
this.propagateChange(this.data);
}
}
This is the validator
import { NG_VALIDATORS, Validator, FormControl } from '#angular/forms';
import { Directive, forwardRef, Input } from '#angular/core';
#Directive({
selector: '[customMaxLength][ngModel]',
providers: [
{ provide: NG_VALIDATORS, useExisting: forwardRef(() => MaxLengthValidatorDirective), multi: true}
]
})
export class MaxLengthValidatorDirective implements Validator{
#Input() customMaxLength: number;
ngOnInit(){
}
validate(c: FormControl): { [key: string]: any; } {
if(c.value && this.customMaxLength){
return c.value.length < this.customMaxLength ? null : { customMaxLength:{ valid: false } };
} else {
return null;
}
}
}
Aaand finally this is an use:
<form #form="ngForm">
<custom-text-area [maxLength]="3" required ngModel name="textArea"></custom-text-area>
</form>
The main problem is how you are using the NgModel. You are using it in both the custom component and inside your form. You should only be using it inside of your form. Meaning, textarea should not have an NgModel.
No:
<textarea
[disabled]='disabled'
[required]='required'
[placeholder]="placeholder"
(changes)="onInput($event)"
(keyup)="onInput($event)"
[(ngModel)] = "data"
[name]="name"
#input="ngModel"
customMaxLength="{{maxLength}}"
></textarea>
Yes:
<textarea
[disabled]='disabled'
[required]='required'
[placeholder]="placeholder"
(changes)="onInput($event)"
(keyup)="onInput($event)"
[name]="name"
customMaxLength="{{maxLength}}"
></textarea>
Here is a working example:
https://plnkr.co/edit/lWZpEpPdnfG7YDiH21jB?p=preview
I'm creating some components in order to learn Angular2.
I have this basic html:
<h1>test</h1>
<btn [order]="0"></btn>
<btn [order]="1"></btn>
<btn [order]="2"></btn>
And in the ts I have this:
import {Component, Input} from 'angular2/core';
import {DataService} from '../services/DataService';
#Component({
selector: 'btn',
template: '<button>test{{ item }}</button>',
inputs: ['order']
})
export class ButtonComponent {
items: Array<number>;
item: number;
#Input() order;
constructor(dataService: DataService) {
console.log(this.order)
}
}
Doing that I get undefined, what am I doing wrong? how can I read the inputs (or an attribute) in order to send data to the class?
EDIT
import {Component, Input} from 'angular2/core';
import {DataService} from '../services/DataService';
#Component({
selector: 'btn',
template: '<button>test{{ item }}</button>',
inputs: ['order']
})
export class ButtonComponent {
items: Array<number>;
item: number;
#Input() order;
ngOnInit(dataService: DataService) {
this.items = dataService.getItems();
console.log(this.order)
}
constructor() {}
}
You can't access them in the constructor, they are not yet initialized. Use ngOnInit() instead. For more details see https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html
export class ButtonComponent implements OnInit {
items: Array<number>;
item: number;
#Input() order;
constructor(dataService: DataService) { }
ngOnInit() {
console.log(this.order);
}
}