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;
}
}
Related
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
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 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('')
}),
})
}
In my script I change value of an element with jquery(same with javascript), but model connected with this element was not changed. here is this element:
<input type="text" class="form-control" id="username" placeholder="Username" [(ngModel)]="user.username">
When I change value manually then model gets updated aswell. What should it be?
Thanks
Se plunker
Here an example:
Parent Component:
import { Comp1Component } from './../comp1/comp1.component';
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-comp-parent',
template:`
<p>ngModel: {{sharedVarParent}}</p>
<app-comp1 [comp1]="sharedVarParent" (sharedVarChange)="onChange($event)"></app-comp1>
<hr />
<app-comp2 [comp2]="sharedVarParent" (sharedVarChange)="onChange($event)"></app-comp2>
`
})
export class CompParentComponent implements OnInit {
sharedVarParent ='Initial';
onChange(ev){
this.sharedVarParent = ev;
}
}
COmp1:
import { Component, OnInit, Input, Output,EventEmitter } from '#angular/core';
#Component({
selector: 'app-comp1',
template:`
<input type="text" id="username" placeholder="{{comp1}}" [ngModel]="comp1" (ngModelChange)="change($event)">
<div>{{comp1}}</div>`
})
export class Comp1Component implements OnInit {
#Input() comp1;
#Output() sharedVarChange = new EventEmitter();
change(newValue) {
this.comp1 = newValue;
this.sharedVarChange.emit(newValue);
}
}
Comp2
import { Component, OnInit, Input, Output,EventEmitter } from '#angular/core';
#Component({
selector: 'app-comp2',
template:`
<input type="text" id="username" placeholder="{{comp2}}" [ngModel]="comp2" (ngModelChange)="change($event)">
<div>{{comp2}}</div>
`
})
export class Comp2Component implements OnInit {
#Input() comp2;
#Output() sharedVarChange = new EventEmitter();
change(newValue) {
this.comp2 = newValue;
this.sharedVarChange.emit(newValue);
}
}
I'm building a standard angular2 app(more specific a todo app). I also added #Ngrx/store.
The first time I load the page, the button is disabled, but when I enter some value in the input box, the button needs to be enabled, but it stays disabled...
app/app.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
template: `
<h1>Hello {{name}}</h1>
<div>
<add-todo></add-todo>
</div>`,
})
export class AppComponent { name = 'Angular'; }
app/components/add-todo/add-todo.component.ts
import { Component, ViewChild, ElementRef } from '#angular/core';
#Component({
moduleId: module.id,
selector: 'add-todo',
template: `
Create new todo
<input #myInput />
<button (click)="addTodo()" [disabled]="!myInput.value">Add</button>`
})
export class AddTodoComponent {
#ViewChild('myInput') input: ElementRef;
constructor() {}
addTodo(): void {
alert(this.input.nativeElement.value);
}
}
From the documentation https://angular.io/docs/ts/latest/guide/forms.html Track the change state and validity of form controls using ngModel...
Update your code to use ngModel and it should work as expected
import { Component, ViewChild, ElementRef } from '#angular/core';
#Component({
moduleId: module.id,
selector: 'add-todo',
template: `
Create new todo
<input #myInput [(ngModel)]="inputFieldValue" />
<button (click)="addTodo()" [disabled]="!myInput.value">Add</button>`
})
export class AddTodoComponent {
#ViewChild('myInput') input: ElementRef;
public inputFieldValue:string = '';
constructor() {}
addTodo(): void {
alert(this.input.nativeElement.value);
}
}
What if you do this way:
import {Component} from '#angular/core';
#Component({
selector: 'add-todo',
template: `
Create new todo
<input #todoTitleInput [(ngModel)]="todoTitle"/>
<button (click)="addTodo(todoTitleInput.value)" [disabled]="!todoTitle">Add</button>
`,
})
export class AddTodoComponent {
addTodo(title: string): void {
alert(title);
}
}