I went through all the related issues, but can not find any proper answer.
I am getting an error when using the [(ngModel)] with the angular material in forms data binding.
add-book.component.html
<html>
<head>
<title>
Create Book
</title>
</head>
<header>
<h2 class="form_heading"> Create New Book </h2>
</header>
<body class="create_Book_Body">
<form name="createBookForm" #createBookForm="ngForm">
{{libraryItemModel | json}}
<mat-form-field class="form_Field">
<input type="text" pattern="[0-9]*" minlength="5" maxlength="5" min="10000" name="bookIsbn" #bookIsbn="ngModel" [(ngModel)]="libraryItemModel.bookIsbn" matInput
placeholder="DVD ISBN NO" required>
<div *ngIf="((bookIsbn.touched) && !(bookIsbn.valid))">
<div *ngIf="bookIsbn.errors.required">
<mat-error >
This field is required/Invalid
</mat-error>
</div>
<div *ngIf="bookIsbn.errors.minlength">
<mat-error >
ISBN should be of 5 characters
</mat-error>
</div>
<div *ngIf="bookIsbn.errors.pattern">
<mat-error >
Invalid Pattern
</mat-error>
</div>
</div>
</mat-form-field>
</form>
</body>
</html>
add-book.component.ts
import {Component, Input, OnInit} from '#angular/core';
import {FormControl, FormGroup, Validators} from '#angular/forms';
#Component({
selector: 'app-add-book',
templateUrl: './add-book.component.html',
styleUrls: ['./add-book.component.css']
})
export class AddBookComponent implements OnInit {
onSubmit($event) : void {
console.log(($event));
}
constructor() { }
ngOnInit() {
}
}
here I have created a class library item, in which the models are been created and the form data will be bound to.
library-item.ts
export class LibraryItem {
constructor(
public bookIsbn : string
){}
}
app.component.ts
import { Component } from '#angular/core';
import {LibraryItem} from './library-item';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Lib_Manager';
inputText : string = 'initial Value'
libraryItemModel = new LibraryItem('12345');
}
Error
Thanks in advance for considering my issue.
In your html you have used bookIsbn as a form validation input... but what you have done is adding a string as bookIsbn and try to read the properties...
Check angular validation for proper validation..
https://angular.io/guide/form-validation
Related
I'm working on a little login project, and there is one thing that doesn't work for me. I want to do two way binding for my userID and password, and it just doesn't work. (I'm working in the login component, so not in the app component).
HTML:
<div class="loginstuff">
<label>Log in a.u.b.</label><br>
<input type="text" [(ngModel)]="userID" /><br>
<div>user: {{ userID }}</div>
<input type="text" [(ngModel)]="password" /><br>
<div>pw: {{ password }}</div>
<button (click)="Login();">Login</button><br>
<input type="radio" name="radiobutton"
[(ngModel)]="selectedRole" (focus)="RoleSelection('User')" checked/>User
<input type="radio" name="radiobutton"
[(ngModel)]="selectedRole" (focus)="RoleSelection('Admin')"/>Admin<br>
<div>your selected role is {{selectedRole}}</div>
<a [routerLink]="['/registration']" (click)="GoToRegistration()">Registreren</a>
</div>
<router-outlet></router-outlet>
TS
import { Component, ElementRef, Input, OnInit, ViewChild, NgModule } from '#angular/core';
import {NgForm} from '#angular/forms';
import { FormsModule } from '#angular/forms';
import { Router } from '#angular/router';
import {MatRadioModule} from '#angular/material/radio';
import { stringify } from 'querystring';
import {BrowserModule} from '#angular/platform-browser';
#Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
constructor(private router: Router) { }
ngOnInit(): void {
}
selectedRole='User';
userID = '';
password = '';
registration = '';
RoleSelection(role){
this.selectedRole = role;
}
Login(){
if(this.selectedRole === 'User'){
console.log(this.userID, this.password);
}
else{
this.router.navigate(['/adminpage'])
}
}
}
And this is what it looks like:
Login project
I added the user: and pw: to check if the two way binding is working. Whatever I type in the userID and password fields is supposed to show behind the user: and pw:, but it doesn't. As you can see, I did the two way binding with my radio buttons and it works (on the image you can see it shows "you selected role is User, User comes from a variable. PS: I know the variable is already bound to the value "User" but that's just the default value. When I click on the admin radio button it changes to "Admin" so I know it works). I have no idea what I'm doing wrong, since I do the exact same thing with the radio buttons and they work. Any ideas?
Use FormGroup, it supports the two way binding for forms and much more, like validation. Pass a FormGroup to your <div class="loginstuff" [formGroup]="yourFormGroup">. And for your inputs:
<input type="text" formControlName="login"/>.
And in your .ts class:
const form = new FormGroup({
login: new FormControl(),
password: new FormControl()
});
I need to create a button for uploading a file in my form. I am using tag in my html but it is throwing an error : Can't bind to 'control' since it isn't a known property of 'app-contorl-message'.
Here is my html code -
<div class="col-lg-6">
<div class="form-group">
<div class="custom-file">
<input *ngIf="mode == 'CREATE'" type="file" (change)="onFileSelect($event)"
accept=".jpg,.jpeg,.png"/>
<app-contorl-message [control]="form.get('file')"></app-contorl-message>
</div>
</div>
</div>
here is def of onSelect($event) :
onFileSelect(event) {
this.form.get('file').setValue(event.srcElement.files);
this.fileData = event.srcElement.files;
console.log(event);
}
Thanks in advnace!
In your AppControlMessageComponent you need to create an #Input() named control. To learn more about inputs and output, visit: https://angular.io/guide/inputs-outputs
app-control-message.component.ts
import { Component, OnInit, Input } from "#angular/core";
#Component({
selector: "app-app-control-message",
templateUrl: "./app-control-message.component.html",
styleUrls: ["./app-control-message.component.css"]
})
export class AppControlMessageComponent implements OnInit {
#Input() control; // Input whose value parent component will provide
constructor() {}
ngOnInit() {}
}
I have declared one property called foobar in the Angular 2 Foobar component:
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-foobar',
templateUrl: './foobar.component.html',
styleUrls: ['./foobar.component.css']
})
export class FoobarComponent implements OnInit {
foobar= 'test';
ngOnInit() {
}
}
then in foobar.component.html file I output that property like this:
<div>
<br>
{{foobar}}
</div>
and it outputs word test, however, once I have added element with id foobar:
<div>
<br>
{{foobar}}
<br>
<input type="text" #foobar>
</div>
I'm no longer able to get value from the component and it outputs [object HTMLInputElement], because it was shadowed by the input field id.
How can I get value from the component without changing component property name and input field id?
You can try this
<div>
<br>
{{ this['foobar'] }}
<br>
<input type="text" #foobar>
</div>
but it is not documented and may break in future releases
Try with two-way databinding:
<div>
<br />
{{foobar}}
<br />
<input type="text" [(ngModel)]="foobar">
</div>`
To accomplish that you need the module: #angular/forms in your package.json and don´t forget to import it to your app-module:
import {FormsModule} from "#angular/forms";
#NgModule({
declarations: [ ... ],
imports: [
FormsModule,
...
]
...
})
export class AppModule{ ... }
I have a very basic form consisting of a input field and a button. I am trying to use angular2 validators to show an error message when anything other than numbers are entered into the input field and also to disable the submit button when the input field is invalid or empty. For some reason the error message shows regardless of what gets entered... Any idea what i'm doing wrong?
my code:
app.component.html:
<div class="row">
<div class="col-md-4 col-md-push-4">
<form [formGroup]="barcodeForm" role="form" (ngSubmit)="submitBarcode(barcode)" >
<div class="form-group">
<input type="number" class="form-control" id="barcode" placeholder="Enter Barcode" [formControl]="barcodeForm.controls['barcode']" [(ngModel)]="barcode" name="barcode" #focusInput>
<div [hidden]="barcode.valid || barcode.pristine" class="alert alert-danger">A barcode can only consist of numbers (0-9)...</div>
</div>
<button class="btn btn-submit btn-block" [disabled]="!(barcode.valid) || barcode.pristine">Submit</button>
</form>
</div>
</div>
part of app.component.ts:
import { Component, ViewChild, ElementRef, AfterViewInit } from '#angular/core';
import { FormBuilder, FormGroup, Validators } from '#angular/forms';
import { RestService } from "./services/rest.service";
import { ProductModel } from "./models/product.model";
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
#ViewChild('focusInput') focusInput: ElementRef;
barcode: string;
barcodeForm: FormGroup;
product: ProductModel;
constructor(fb: FormBuilder, private restService: RestService){
this.barcodeForm = fb.group({
'barcode':['', [Validators.required, Validators.pattern("[0-9]+")]]
});
}
In angular2 there are two types of forms: template driven and model driven.
Model driven is defining the form's structure in code and binding inputs to its controls (via formControl and formGroup).
And template driven is using ngModel and defining validators on the template.
I can see most of your code is targeted for model driven which in my opinion is better anyway, but you still have ngModel on your input, do you need it for something?
I dont see you using it anywhere other than barcode.valid which shouldn't work since barcode is merely a string. You want to bind the disabled property to barcodeForms.controls['barcode'].valid instead and then remove the use of ngModel. It might conflict with formControl since both of them initialize a FormControl instance for that element.
I have created a custom control directive as "my-text-box", inside this directive I am using html control <input>, I need to pass values from my custom control to html input control. In angular1 simply I am using like <my-text-box id="1" name="Box 1"> using my custom attributes of scope variables in directive, i assigned the values to html control like <input type="text" id="{{id}}" name={{name}} > how can i use this scenario in angular 2.
Here is my sample code:
AppComponent.ts
import {Component} from '#angular/core';
import {TextBoxComponent} from './TextBoxComponentDirective';
#Component({
selector: 'my-app',
template: '<h1>{{title}}</h1> <my-text-box id="66" name="MyText1"></my-text-box>',
directives:[TextBoxComponent]
})
export class AppComponent {
title="Sample TextBox";
}
TextBoxComponentDirective.ts
import {Component,Input,Directive} from '#angular/core';
#Component({
selector:'my-text-box',
templateUrl: './TextBoxTemplate.html',
})
export class TextBoxComponent {
#Input() id;
}
TextBoxTemplate.html
<input type="text" [name]="name" [id]="id"/>
You can use #Input() for this:
#Component({
selector: 'my-text-box',
template: `
<input type="text" [id]="id" [name]="name" >
`
})
export class MyTextBoxComponent {
#Input() id;
#Input() name;
}
In your parent component you now can use it like so:
<my-text-box id="1" name="Box 1">
Or if you need to bind to variables:
<my-text-box [id]="someId" [name]="theBoxName">
Working Plunker for example usage