I want my form date input field to display today's date e.g (2019-11-28) when I open the form. I saw many examples on how it works in AngularJs but how can I get the date with reactive form.
form
//.....
<div class="form-group">
<label>Date:</label>
<div class="input-group">
<input type="date" class="form-control col-md-8" formControlName="date"/>
</div>
</div>
.
//...
With formControlName.
.ts
//...
currentD = new Date();
..
..
//....
Set formControlName default value as (new Date()).toISOString().substring(0,10)
Working Demo
Try like this:
.ts
myForm:FormGroup;
this.myForm = new FormGroup({
'presentDate': new FormControl((new Date()).toISOString().substring(0,10))
});
use data bindind you can use one way binding
<input type="date" [value]="currentD" class="form-control col-md-8" formControlName="date"/>
or tuo way binding
<input type="date" [(ngModel)]="currentD" class="form-control col-md-8" formControlName="date"/>
create a FormGroup variable to assign the value to Form
form : FormGroup;
// you can set the default value
constructor( fb:FormBuilder){
this.form = fb.group({
presentDate: [new Date()]
});
}
In the View
<div class="form-group">
<form [formGroup] = "form">
<label>Date:</label>
<div class="input-group">
<input type="date" class="form-control col-md-8" formControlName="presentDate"/>
</div>
</div>
Related
Im trying to create a form that will return as its value an JSON object that contains as an attribute a list of objects. Form value JSON example :
{
"name" : "contestName",
"teams" :[
{
"name":"team1",
"wins":1,
"loses":1},
{
"name":"team2",
"wins":2,
"loses":2}
]
}
My Form Looks like :
<form id="form" #ContestForm="ngForm" (ngSubmit)="addNewContest(ContestForm.value)">
<div class="form-group" [(ngModel)]="contest" >
<input type="Contest Name" [(ngModel)]="name" class="form-control" placeholder="Contest Name">
<br>
<div class="form-group" [(ngModel)]="teams" *ngFor="let i of [].constructor(2)">
<br>
<label>Team {{i}} :</label>
<br><br>
<input type="Name" [(ngModel)]="name" class="form-control" placeholder="Name">
<br>
<div class="form-group">
<input type="Wins" [(ngModel)]="wins" class="form-control" placeholder="Wins">
</div>
<br>
<div class="form-group">
<input type="Loses" [(ngModel)]="loses" class="form-control" placeholder="Loses">
</div>
</div>
<br>
</div>
</form>
I tried this and setting the values through typescript in a createObjectFromForm function that would individually assign the values and return the object but got no results, I am hoping someone faced this issue as I think it`s a pretty common one.
Thanks Brandon Taylor, I used a reactive form and form groups and reached the desired result! example :
form(in html file) :
<form [formGroup]="contestForm" (ngSubmit)="alert()">
<input formControlName="name"/>
<div formArrayName="teams" *ngFor="let team of getTeamsControls(); index as i">
<div formGroupName="{{i}}">
<label> name </label>
<input type="text" id="name" name="name" formControlName="name">
<label> wins </label>
<input type="text" id="wins" name="wins" formControlName="wins">
<label> loses </label>
<input type="text" id="loses" name="loses" formControlName="loses">
</div>
</div>
<p>
<button type="submit">Submit</button>
</p>
</form>
form declaration and getTeamsControls(); function (in typescript file):
contestForm = new FormGroup({
name: new FormControl(''),
teams: new FormArray([
new FormGroup({
name : new FormControl(''),
wins : new FormControl(''),
loses : new FormControl('')
})
,
new FormGroup({
name : new FormControl(''),
wins : new FormControl(''),
loses : new FormControl('')
})
])
})
getTeamsControls() { return (<FormArray>this.contestForm.get('teams')).controls;}
I am trying to validate a html form in angular using Formcontrol validators. But in html file I am getting an error saying "Property 'emailId' does not exist on type 'LoginPageComponent'."
Here's my html and ts code:
<form [formGroup]="formGroupLogin" id="contact" (ngSubmit)="checkuser()" method="post">
<div class="form-group">
<label for="Inputemail"><i class="fas fa-user mr-1"></i>Email </label>
<input type="email" formControlName="emailId" class="form-control" id="emailId" aria-describedby="emailHelp" required>
<span [ngClass]="'error'" *ngIf="emailId.invalid && emailId.touched">Email is Invalid</span>
</div>
<div class="form-group">
<label for="InputPassword"><i class="fas fa-lock prefix mr-1"></i>Password</label>
<input type="password" formControlName="password" class="form-control" id="InputPassword" required>
</div>
<button class="btn btn-primary" name="submit" type="submit" id="contact-submit">Submit</button>
</form>
Typescript file:
initForm() {
this.formGroupLogin = new FormGroup({
emailId: new FormControl('', [Validators.required]),
password: new FormControl('', Validators.required)
})
}
Can anyone help me out?
emailId is not a object of your component but of your FormGroup.
So you should be using
formGroupLogin.emailId.invalid
The problem is that in your HTML code you have this:
<form [formGroup]="formGroupLogin"
and in yout .ts code you have this
this.formGroup = new FormGroup({
It is not the same form name. formGroupLogin != formGroup
Use same name in both files.
Let me know if it worked for you.
The error is completely correct, such a variable does not exist in your component, it is a formcontrol in your form, so you should refer to it accordingly. I like to use a getter or then call get on the parentform:
<span *ngIf="formGroupLogin.get('emailId').invalid && formGroupLogin.get('emailId').invalid">
<input type="date" #bind-value="masterEditItem.Date" class="form-control col-md-4" readonly="readonly" />
<input type="date" class="form-control col-md-4" readonly="readonly" value="#masterEditItem.Date.ToString("yyyy-mm-dd")" />
<input type="date" class="form-control col-md-4" value="#masterEditItem.Date" />
The outputs of the above three lines are:
It seems that if I want a read-only date box then I will have to use two-way binding?
Is there a way to use one-way binding for a read-only date box? (because some of my date properties are read-only and they do not work with two-way binding, I also want to use the class="form-control" to look like a text box)
Thanks!
You can use an input type text as follows:
#page "/"
<input type="text" readonly="readonly" value="#stringDate" />
#code{
public DateTime MyDate { get; } = DateTime.Now;
private string stringDate;
protected override void OnInitialized()
{
stringDate = MyDate.ToShortDateString();
base.OnInitialized();
}
}
This is my angular 9 form code. but it not works. how to handle this ? ERROR TypeError: Cannot read property 'mobile_number' of undefined. help me to solve this.
<form (ngSubmit)="processForm()">
<section *ngFor="let user of users;let i=index">
<div class="form group">
<input type="text" name="id" class="form-control" [(ngModel)]="user.id">
</div>
<div class="form group">
<label for="fname">First Name</label>
<input type="text" name="fname" class="form-control" [(ngModel)]="user.fname">
</div>
<div class="form group">
<label for="lname">Last Name</label>
<input type="text" name="lname" class="form-control" [(ngModel)]="user.lname">
</div>
<div class="form group">
<label for="age">Age</label>
<input type="text" name="age" class="form-control" [(ngModel)]="user.age">
</div>
<div class="form group">
<label for="mobile_number">Mobile_Number</label>
<input type="text" name="mobile_number" class="form-control" [(ngModel)]="user.phone && user.phone[0].mobile_number">
</div>
<input type="submit" value="save" class="btn btn-success">
</section>
</form>
I had created classes something like this:
export class User {
constructor(
public id:Number,
public age:Number,
public fname:string,
public lname:string,
public phone:Phone[]){}
}
export class Phone{
constructor(
public pid:Number,
public mobile_number:Number){}
}
How can i assign ngModel for input filed with these type of classes
(Below answer I had seen it from stackoverflow how to get form data in angular 4 with array of objects answers but it is throwing error like mobile_number is undefined)
<input type="text" name="mobile_number"
class="form-control"
[(ngModel)]="user.phone && user.phone[0].mobile_number">
Can someone help me with this?
My typescript file:
users:User[]=[new User(null,null,null,null,[])];
You are trying to edit only one phone number? No need for an array.
If you want to edit multiple phone numbers you could try something like this:
<div class="form group" *ngFor="let phone of user.phone; index as i;">
<label for="mobile_number">Mobile_Number {{i+1}}</label>
<input type="text" name="mobile_number" class="form-control" [(ngModel)]="phone.mobile_number">
</div>
Add an "add" button and fill the phone array with an new phone object.
Create an interface for your User type
export interface Phone{
pid:Number;
mobile_number:Number;
}
export interface User {
id:Number;
age:Number;
fname:string;
lname:string;
phone:Phone[];
}
And create an object of type User to hold the values
public user = {} as User;
CheckThis
I am creating dynamic textboxes from a list like the following
Angular js
$scope.phonenumbers = [{text: ''},{text: ''},{text: ''}];
HTML Part
<div class="relativeWrap" ng-repeat="phone in phonenumbers">
<input placeholder="Phone Number" pattern="[0-9]{10}" ng-maxlength="10" maxlength="10" type="text" class="form-control input-text phone_number" name="phonenumber[]" ng-model="phone.text" >
</div>
Now I need to do the following validation in form
Any one of the following 3 textboxes is mandatory. I put required but it is validating all.
Please help
You will need to use ng-required and conditionally set the required to true for all the field only when none of the fields have a value. To do this you will need to maintain a flag in your controller and bind that your ng-required.
The method in the controller:
$scope.isValue = false;
$scope.textChange = function(){
$scope.isNoValue = $scope.phonenumbers.some(function(item)){
return item.text;
}
}
Your HTML:
<div class="relativeWrap" ng-repeat="phone in phonenumbers">
<input placeholder="Phone Number" pattern="[0-9]{10}" ng-maxlength="10" maxlength="10" type="text" class="form-control input-text phone_number" name="phonenumber[]" ng-model="phone.text" ng-required="!isValue" ng-change="textChange">
</div>