I'm creating an input text component with angular2. I need to add a class at this control if is valid and if it's required. This is the component:
import { Component, Input } from "#angular/core";
import { NgForm } from '#angular/forms';
#Component({
selector: "input-control",
template: `
<div [class.has-success]="required" class="form-group form-md-line-input form-md-floating-label">
<input [class.edited]="model[property]"
[(ngModel)]="model[property]"
[attr.ngControl]="property"
[name]="property"
type="text"
class="form-control"
id="{{property}}"
value=""
[attr.required]="required">
<label [attr.for]="property">{{label}}</label>
<span class="help-block">{{description}}</span>
</div>
`
})
export class InputControlComponent {
#Input()
model: any;
#Input()
property: string;
#Input()
label: string;
#Input()
description: string;
#Input()
required: boolean;
#Input()
form: NgForm;
}
In the first row of the template I set the "has-success" class if the input is required but I need to set it if it's valid too. Somethig like this:
[class.has-success]="required && form.controls[property].valid"
The html is this:
<form role="form" *ngIf="active" (ngSubmit)="onSubmit(databaseForm)" #databaseForm="ngForm">
<div class="form-body">
<div class="row">
<div class="col-md-6">
<input-control [model]="model" [property]="'code'" [form]="databaseForm" [label]="'#Localizer["Code"]'" [description]="'#Localizer["InsertCode"]'" [required]="true"></input-control>
</div>
<div class="col-md-6">
<input-control [model]="model" [property]="'description'" [form]="databaseForm" [label]="'#Localizer["Description"]'" [description]="'#Localizer["InsertDescription"]'"></input-control>
</div>
</div>
</div>
</form>
I think that you can't use the template-driven form a sub-component and make it be part of a form of the parent component without implementing a custom value accessor with Angular2 prior to version RC2.
See this question:
Angular 2 custom form input
With version RC2+, I think that it's possible out of the box like this:
<form #databaseForm="ngForm">
<input-control name="code" [ngModelOptions]="{name: 'code'}"
[(ngModel)]="model.code"/>
</form>
Related
I am working on a with nested form groups in Angular 14.
There are form controls common to multiple forms so I have added them in a partial.
In form.component.ts I have:
import { Component } from '#angular/core';
import { FormGroup, FormControl, Validators, FormArray } from '#angular/forms';
#Component({
selector: 'my-app',
templateUrl: './form.component.html',
styleUrls: ['./form.component.css'],
})
export class FormComponent {
public form: FormGroup = new FormGroup({
first_name: new FormControl('', Validators.required),
last_name: new FormControl('', Validators.required),
email: new FormControl('', [Validators.required, Validators.email]),
phone: new FormControl('', Validators.required),
});
constructor() {}
ngOnInit(): void {}
public sendFormData() {
console.log(this.form.value);
}
}
In form.component.html I include the partial <app-additional></app-additional>:
<form [formGroup]="form">
<mat-form-field appearance="outline" floatLabel="always">
<mat-label class="mat-label">Fast name:</mat-label>
<input class="mat-input" matInput formControlName="first_name" />
</mat-form-field>
<mat-form-field appearance="outline" floatLabel="always">
<mat-label class="mat-label">Last name:</mat-label>
<input class="mat-input" matInput formControlName="last_name" />
</mat-form-field>
<app-additional></app-additional>
<div class="center">
<button
(click)="sendFormData()"
mat-raised-button
color="primary"
[disabled]="!form.valid"
>
Submit
</button>
</div>
</form>
See Stackblitz HERE.
The problem
Instead of rendering the partial, the app throws the error:
Error: formControlName must be used with a parent formGroup directive.
Questions:
What causes this problem?
What is the most reliable way to fix it?
You need to pass your form as an input to partial and provide the same form group name over there to make it work.
In form.component.html:
<app-additional [form]="form"></app-additional>
In additional.component.html:
<div class="more-controls" [formGroup]="form">
In additional.component.ts:
#Input() form: FormGroup;
The problem is caused because the form control inside the partial component () is not bound to a parent FormGroup directive.
To fix this problem, you can pass the form FormGroup from the parent component to the partial component using property binding ([form]="form") and bind the form control inside the partial component to the parent FormGroup using formControlName and formGroup directive.
just like this :
<form [formGroup]="form">
<!-- ... -->
<app-additional [form]="form"></app-additional>
<!-- ... -->
</form>
I'm trying to bind the model in angular template driven forms. I created a model class and using it to populate the input field.
HTML:
<div class="form-group col-md-2 col-12" [class.text- danger]="nameCode.invalid && nameCode.touched">
<label for="inputName" class="form-control-label"> Name</label>
<input type="text" class="form-control" [class.is-form-invalid]="nameCode.invalid && nameCode.touched" id="inputName" name="lotCode"[(ngModel)]="formModel.name" #nameCode="ngModel" aria-describedby="nameHelp" autocomplete="new-password" required>
<small id="nameHelp" class="text-danger" *ngIf="nameCode.invalid && nameCode.touched">Required</small>
Component:
export class AppComponent {
formModel: FormModel= new FormModel();
}
export class FormModel {
name: "abc"
}
https://stackblitz.com/edit/angular-yue9fe?file=src%2Fapp%2Fapp.component.ts
name: "abc" should be name= "abc" (or name: string = "abc"). Right now you're declaring type of name as "abc", which is not what you want.
You have bind the name as "abc" dataType. So if you want to bind your model with html you can define your formModel class like,
export class FormModel {
constructor(public name="abc"){}
}
I'd like to link radio buttons inside a form to an object, i cant get it to work!
I am linking ngModel to a variable of type string that is called presentation
I dont know what am I missing? even when i copy a working example it wont work in my form!
here is part of my form that I think is dysfunctional:
HTML:
<div class="uk-margin-large-right">
<div class="uk-flex-inline ">
<span class="uk-form-label uk-margin-small-right uk-text-bold "> Presentation </span>
<label class="uk-margin-medium-right">
<input class="uk-radio " type="radio" name="radio1" value="Cephalic" [(ngModel)]="presentaion"> Cephalic </label>
<label class="uk-margin-medium-right">
<input class="uk-radio" type="radio" name="radio1" value="Breech" [(ngModel)]="presentaion"> Breech </label>
<label class="uk-margin-medium-right">
<input class="uk-radio" type="radio" name="radio1" value="Transverse lie" [(ngModel)]="presentaion"> Transverse lie </label>
</div>
<p>this is {{presentation}}</p>
</div>
Typescript:
import { Component, OnInit } from '#angular/core';
import { CommService } from '../services/comm.service';
#Component({
selector: 'app-form',
templateUrl: './form.component.html',
styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit {
user = {
Doctor: '',
Patient: '',
Type:'',
Report: ''
};
presentation:'';
constructor(private CommService: CommService) { }
ngOnInit() {
this.CommService.setData(this.user);
console.log(this.presentation);
}
}
Declare it like this if you want to give it initial value
presentaion:string = 'Cephalic';
log() { // log the value to console
console.log(this.presentaion)
}
Template
<p>this is {{presentaion}}</p>
<button (click)="log()">Log the value to console</button>
in your example there was a typo with the property name <p>this is {{presentation}}</p> just change it to presentaion
stackblitz example
So I have a simple login component created with angular like so.
<div class="form">
<form (submit) = "loginUser($event)">
<input type="text" placeholder="username"/>
<input type="password" placeholder="password"/>
<button type = "submit">login</button>
</form>
</div>
On click of this button I want to be able to print the data to the console which is why I added this functionality.
<form (submit) = "loginUser($event)">
This is what my .ts file looks like for that same component.
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-login-form',
templateUrl: './login-form.component.html',
styleUrls: ['./login-form.component.css']
})
export class LoginFormComponent implements OnInit {
constructor() { }
ngOnInit() {
}
loginUser(e){
var username = e.target.elements[0].value;
var password = e.target.elements[1].value;
console.log(username,password);
}
}
When I look at the console I don't see the user name and password that was entered. Am I doing something wrong?
<form class="k-form" (ngSubmit)="loginUser()>
<input type="text" [(ngModel)]="username" name="username" placeholder="username">
<input type="password"[(ngModel)]="password" name="password" placeholder="password">
</form>
Component
username: string;
password: string;
loginUser(){
console.log(this.username,this.password);
}
Upon adding e.preventDefault() to the function it seems to work as expected
Please see the following examples. I have loaded jquery and jquery-steps into the project already and it is working. However after rendering the view, changing the data in the input boxes doesn't update the values in the form group mainForm. I believe the reason is that jquery-steps dynamically removed and reconstructed the html for the form, and so the form group doesn't link to the DOMs anymore.
Is there any way to re-bind FormGroup mainForm to the DOMs after jquery-steps reconstructed the html?
I read about ComponentResolver and ViewContainerRef, is it where it should use those? Could you give me an example how to use those in this situation?
Thank you!
<pre>{{ mainForm.value | json }}</pre>
<form [formGroup]="mainForm" id="mainForm" action="#">
<h1>Account</h1>
<div>
<label for="userName">User name *</label>
<input formControlName="userName" type="text" class="required">
<label for="password">Password *</label>
<input formControlName="password" type="text" class="required">
<label for="confirm">Confirm Password *</label>
<input formControlName="confirm" type="text" class="required">
<p>(*) Mandatory</p>
</div>
<h1>Finish</h1>
< div>
<input formControlName="acceptTerms" type="checkbox" class="required">
<label for="acceptTerms">I agree with the Terms and Conditions.</label>
</div>
</form>
import {Component, AfterContentInit} from "#angular/core";
import {FormBuilder, Validators, FormGroup} from "#angular/forms";
#Component({
templateUrl: 'main-view.template.html'
})
export class MainViewComponent implements AfterContentInit {
private mainForm: FormGroup;
constructor(private formBuilder: FormBuilder) {
this.mainForm = this.formBuilder.group({
userName: ['', Validators.required],
password: ['', Validators.required],
confirm: ['', Validators.required],
acceptTerms: ['', Validators.required],
});
}
ngAfterContentInit() {
$("#mainForm").steps();
}
}
The main reason why that is not working is that jquery-steps plugin removes your html markup.
Using jquery in angular2 is bad idea but if you want to get it working i can offer you slightly modify the library
jquery.steps.js
function render(wizard, options, state) {
+ var contentWrapper = $('<{0} class=\"{1}\"></{0}>'.format(options.contentContainerTag, "content " + options.clearFixCssClass));
+ contentWrapper.append(wizard.children());
// Create a content wrapper and copy HTML from the intial wizard structure
var wrapperTemplate = "<{0} class=\"{1}\">{2}</{0}>",
orientation = getValidEnumValue(stepsOrientation, options.stepsOrientation),
verticalCssClass = (orientation === stepsOrientation.vertical) ? " vertical" : "",
- //contentWrapper = $(wrapperTemplate.format(options.contentContainerTag, "content " + options.clearFixCssClass, wizard.html())),
See also Plunker Example