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
Related
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
I believe what I'm trying to do is trivial, but I've tried many different things and can't figure it out.
I have two components, SearchComponent and DetailsComponent that displays search results.
A route module:
const routes: Routes = [
{ path: '', component: SearchComponent},
{ path: 'armory/:name', component: DetailsComponent}
];
#NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
})
export class AppRoutingModule {}
and an input in search.component.html
<form class="form-inline container-fluid">
<input type="text" id="name" placeholder="Character name..." class="form-control">
<button (click)="onSearch( ... <!--name should be here-->)" class="btn">
<span class="fa fa-search"></span></button>
</form>
and then in search.component.ts:
export class SearchComponent implements OnInit {
constructor(private router: Router) {
}
onSearch(name: string) {
this.router.navigate(['/armory', name])
}
}
How do I get the name input's value and pass it as a parameter to onSearch()?
If you want to get the value of name you can simply assign a reference to the input field like this #name. Here's what you need to do:
search.component.html
<form class="form-inline container-fluid">
<input type="text" id="name" #name placeholder="Character name..."
class="form-control">
<button (click)="onSearch(name.value)" class="btn">
<span class="fa fa-search"></span></button>
</form>
Hope it helps!
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
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>
I am trying to create a login form but it shows the form values 2 times in console at one click and i am not sure where the error was can any one find the error....
my template
div class="login jumbotron center-block">
<h1>Login</h1>
<form #form ="ngForm" (ngSubmit)="onSubmit(form.value)">
<div class="form-group">
<label for="username">Username</label>
<input type="text" ngControl ="email" class="form-control" id="emailh" placeholder="Username">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" ngControl ="phone" class="form-control" id="phoneh" placeholder="Password">
</div>
<button class="btn btn-default">Submit</button>
</form>
</div>
my component
import { Component } from '#angular/core';
import { Router, ROUTER_DIRECTIVES } from '#angular/router';
import { CORE_DIRECTIVES, FORM_DIRECTIVES } from '#angular/common';
import { Http, Headers } from '#angular/http';
import { contentHeaders } from '../headers/headers';
import {Control,FormBuilder,ControlGroup,Validators} from '#angular/common';
#Component({
directives: [ ROUTER_DIRECTIVES, CORE_DIRECTIVES, FORM_DIRECTIVES ],
templateUrl : "./components/login/login.html",
})
export class Login {
constructor(public router: Router, public http: Http) {
}
onSubmit(form:any) {
console.log(form);
}
}
I am trying to create a login form but it shows the form values 2 times in console at one click and i am not sure where the error was can any one find the error....
I think you need disable the old forms module
import {disableDeprecatedForms, provideForms} from '#angular/forms';
bootstrap(AppComponent, [disableDeprecatedForms(), provideForms()]);
and import forms-related stuff only from #angular/forms instead of #angular/common