Bind reactive forms with custom input etc - javascript

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 .

Related

How to build reusable field for reactive form in Angular

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

is it correct way to bind multiple values inside ngFor?

trying to understand how to bind input values in ngFor in below code both are printing same values , trying to set different value for each input , where i am making mistake ?
app.comp.html
<div *ngFor="let ques of sub.question">
<label for="subQuestionsInput">{{ques.questionText}}</label>
<input type="subQuestionsInput" class="form-control" *ngIf= "ques.answerType === 'TEXT_NUMBER'" name="TEXT_NUMBER" placeholder="Enter Dose amount Left" [(ngModel)]="TEXT_NUMBER">
<input type="subQuestionsInput" class="form-control" *ngIf= "ques.answerType === 'TEXT_DATE'" name="TEXT_DATE" placeholder="Enter Next Dose Date" [(ngModel)]="TEXT_DATE">
</div>
app.comp.ts
import {
Component,
OnInit
} from '#angular/core';
import {
ApiService
} from './api.service';
import {
EventService
} from './format-questions/format-questions.service'
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent Implement OnInit {
TEXT_NUMBER: string;
TEXT_DATE: string;
constructor(private dataService: ApiService, private eventService: EventService) {}
ngOnInit() {
console.log(TEXT_NUMBER);
console.log(TEXT_DATE);
}
}

How to disable radio option button withou id and use angular rendering2

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;
}
}

How to create Angular 2 Custom Component with multiple input fields

I have created a simple custom component in Angular 2 by implementing the CustomValueAccessor interface and it works fine. This component has just 1 input field in it. e.g. Postcode component
<postcode label="Post Code" cssClass="form-control" formControlName="postcode"> </postcode>
Now, I want to expand on this example and create an address component that has multiple input fields, line1, line 2, line3, postcode and country.
I have expanded the postcode example to include multiple fields and I can see the input component coming up on screen. However, the address component values are not being reflected in the host form.
Appreciate any pointer in this direction.
Example :
import { Component, OnInit, Input } from '#angular/core';
import { FormControl, FormGroup, ControlValueAccessor, FormBuilder, NG_VALUE_ACCESSOR, Validators } from '#angular/forms';
import { Subscription } from 'rxjs/Subscription';
#Component({
selector: 'address',
templateUrl: './address.component.html',
styleUrls: ['./address.component.scss'],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: CommonAddressComponent,
multi: true
}
]
})
export class CommonAddressComponent implements OnInit , ControlValueAccessor {
addressForm : FormGroup
ngOnInit() {
this.addressForm = this.formBuilder.group({
line_1: '',
line_2: '',
});
}
/*private addressForm = new FormControl()*/
private subscription: Subscription;
public disabled: any = false;
constructor(private formBuilder: FormBuilder) { }
//model to view
writeValue(value: any) {
console.log("value = " + value)
this.addressForm.setValue(value);
}
registerOnChange(fn: (value: any) => void) {
console.log("registerOnChange = " + fn)
this.addressForm.valueChanges.subscribe(fn);
}
registerOnTouched() {}
}
Template file :
<div class="form-group" [formGroup]="addressForm">
<input class="form-control" type="text" formControlName="line_1" />
<input class="form-control" type="text" formControlName="line_2" />
</div>
Host Form component file:
import { Component, OnInit } from '#angular/core';
import { FormControl, FormGroup, Validators, FormBuilder} from '#angular/forms';
#Component({
selector: 'app-contacts',
templateUrl: './contacts.component.html',
styleUrls: ['./contacts.component.scss']
})
export class ContactsComponent implements OnInit {
contactsForm: FormGroup;
constructor(private fb: FormBuilder) {
this.createForm();
}
createForm() {
this.contactsForm = this.fb.group({
name: 'test', // <--- the FormControl called "name"
postcode: 'tester111', // <--- the FormControl called "name"
line_3: '111', // <--- the FormControl called "name"*/
addressForm: new FormGroup({
line_1: new FormControl('I am line 1', Validators.minLength(2)),
line_2: new FormControl('I am line 2')
}),
});
}
ngOnInit() {
}
}
Host Form Component Template file:
<form [formGroup]="contactsForm">
<p>Form value: {{ contactsForm.value | json }}</p>
<p>Form status: {{ contactsForm.status | json }}</p>
<div class="form-group">
<label class="center-block">Name:
<input class="form-control" formControlName="name">
</label>
</div>
<div>
<postcode label="Post Code" cssClass="form-control" formControlName="postcode"> </postcode>
</div>
<div class="form-group">
<address-line cssClass="form-control" name="line3" label="line 3" elementName="line3"
elementID="line3" formControlName="line_3"> </address-line>
</div>
<!--<div [formGroup]="contactsForm.addressForm"> -->
<div >
<address formGroupName="addressForm"> </address>
</div>
</form>

After multiple attempts, I was able to get a custom control with multiple input fields in Angular working. Code for the same goes as follows:
Custom component with multiple input fields
import { Component, OnInit, Input, ViewChild } from '#angular/core';
import { FormControl,NgForm, FormGroup, ControlValueAccessor, FormBuilder, NG_VALUE_ACCESSOR, Validators, NgModel } from '#angular/forms';
import { Subscription } from 'rxjs/Subscription';
#Component({
selector: 'address',
templateUrl: './address.component.html',
styleUrls: ['./address.component.scss'],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: AddressComponent,
multi: true
}
]
})
export class AddressComponent implements OnInit , ControlValueAccessor {
addressForm : FormGroup
#Input() label: string;
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
this.addressForm = this.formBuilder.group({
line1: '',
line2: '',
line3: '',
line4: '',
});
}
writeValue(value: any) {
if (value) {
this.addressForm.setValue(value);
}
}
registerOnChange(fn: (value: any) => void) {
console.log("registerOnChange = " + fn)
this.addressForm.valueChanges.subscribe(fn);
}
registerOnTouched() {}
}
Template of Custom Component
Template Code
<div class="form-group" [formGroup]="addressForm">
<input type="text" name="line1" class="form-control" type="text" formControlName="line1" />
<input type="text" name="line2" class="form-control" type="text" formControlName="line2" />
<input type="text" name="line3" class="form-control" type="text" formControlName="line3" />
<input type="text" name="line4" class="form-control" type="text" formControlName="line4" />
</div>
Host or Parent Component class
import { Component } from '#angular/core';
import { NgForm, Validators, FormControl, FormGroup } from '#angular/forms';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
pageForm: FormGroup = new FormGroup({
address: new FormGroup({
line1: new FormControl('',Validators.required),
line2: new FormControl('',Validators.required),
line3: new FormControl('',Validators.required),
line4: new FormControl('')
}),
})
}
4.
<div class="container">
<form [formGroup]="pageForm">
<p>Form value: {{ pageForm.value | json }}</p>
<p>Form status: {{ pageForm.status | json }}</p>
<address label="Line 1" formControlName="address" > </address>
</form>
</div>

Note that Host or Parent Component class must declare the "address" field as a FormControl, not a FormGroup:
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
pageForm: FormGroup = new FormGroup({
address: new FormControl({
line1: new FormControl('',Validators.required),
line2: new FormControl('',Validators.required),
line3: new FormControl('',Validators.required),
line4: new FormControl('')
}),
})
}

How to implement Custom Filter Pipe with *ngFor in Angular 4?

I am using a custom filter pipe on a <li></li> tag. The user will just type a term in the <input> and the list is filtered like a search function.
test.component.html
<form id="filter">
<label>Filter people by name:</label>
<input type="text" [(ngModel)]="term" />
</form>
<ul id="people-listing">
<li *ngFor="let person of people | filter:term">
<div class="single-person">
<span [ngStyle]="{background: person.belt}">{{person.belt}} belt</span>
<h3>{{person.name}}</h3>
</div>
</li>
</ul>
test.component.ts
import { Component, OnInit } from '#angular/core';
import { ActivatedRoute } from '#angular/router';
import { FilterPipe } from '../filter.pipe';
#Component({
selector: 'app-directory',
templateUrl: './test.component.html',
styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
people = [
{name: "Yoshi", belt: "black"},
{name: "Ryu", belt: "red"},
{name: "Crystal", belt: "purple"}
];
constructor() {
}
ngOnInit() {
}
}
filter.pipe.ts
import { Pipe, PipeTransform } from '#angular/core';
#Pipe({
name: 'filter'
})
export class FilterPipe implements PipeTransform {
transform(people: any, term: any): any {
//check if search term is undefined
if(term === undefined) return people;
//return updates people array
return people.filter(function(thisperson){
return thisperson.name.toLowerCase().includes(term.toLowerCase());
})
}
}
Whenever I type a name in the <input> tag, the list with *ngFor is NOT filtered according to the typed word.
I am using Angular 4.1.1.
Do you have any idea how to fix the code above? Thanks.

bind your input with name property.
<form id="filter">
<label>Filter people by name:</label>
<input type="text" name="people" [(ngModel)]="term" />
</form>
Also make sure you have add FilterPipe to declarations of NgModule.

Categories

Resources