I have a question concerning angular reactive form. When I want to set default values for my form controls it does not work in the HTML.
TS:
// set form controls
this.DataService.TabArchivForm = this.fb.group({
ArchiveControl: [true],
DateChannelControl: [Date.now(), Validators.required]
});
HTML:
<div class="tab_main" [formGroup]="this.DataService.TabArchivForm">
<mat-form-field class="field_width">
<mat-label class="Inputlabel">Date</mat-label>
<input class="Inputvalue" matInput id="date" [formControl]="this.DataService.TabArchivForm.controls.DateChannelControl" [matDatepicker]="dp3" required>
<mat-datepicker-toggle matSuffix [for]="dp3"></mat-datepicker-toggle>
<mat-datepicker #dp3 disabled="false"></mat-datepicker>
<mat-error *ngIf="this.DataService.TabArchivForm.controls.DateChannelControl.invalid">{{getErrorMessage()}}</mat-error>
</mat-form-field>
<mat-checkbox color="primary" [formControl]="this.DataService.TabArchivForm.controls.ArchivControl" id="archive">Archive</mat-checkbox>
</div>
I don't know why it does not set the default values for the HTML elements. The checkbox is unchecked and the input field from the date picker is empty as well. Am I missing something?
Thanks for answers!
Related
I am using Angular 9 with angular Material Reactive Forms. I want to disable the fields, but without using the disabled status on the formControl, just only using HTML instead of programmatically in ts.
My Html:
<form name="nameForm" [formGroup]="nameForm" fxLayout="column">
<mat-form-field fxFlex="50" class="m-4">
<input matInput name="startTime" formControlName="startTime" placeholder="{{'DATE.START' | translate}}" type="date">
</mat-form-field>
<mat-form-field fxFlex="30" class="m-4">
<input matInput name="period" formControlName="period" placeholder="{{'TITLE.PERIOD' | translate}}" type="number" step="0.1">
</mat-form-field>
<mat-form-field fxFlex="20" class="m-4">
<input matInput name="range" formControlName="range" placeholder="{{'TITLE.RANGE' | translate}}" type="number" step="0.1">
</mat-form-field>
</form>
My ts:
ngOnInit(): void {
this.nameForm = this.createNameForm();
... some code ...
}
private createNameForm() {
return this.formBuilder.group({
startTime: new FormControl(this.startTime, []),
period: new FormControl(this.period, []),
range: new FormControl(this.range, []),
});
}
... some code ...
I came across this doubt because some questions like this one (How to disable a text area or mat-form-field) has programmatic answers, and I would like to know if it can be solved using exclusively the Html. I know [disabled]="true" does not work, but maybe with a different directive?.
I hope it's clear enough and thanks in advance.
I think that the disabled directive is not valid for the input (it would work with a select or text-area for example ) but to disable the input we can use the readonly directive
[readonly]="true"
[readonly]="method()"
[readonly]="variable"
Although, if you need to disable it, another solution would be
[attr.disabled]="true"
[attr.disabled]="method()"
[attr.disabled]="variable"
I've tried both and they work :)
I have tried both the [disabled] = 'true' and [readonly] = 'true' for the textarea.
Only [readonly] property works well in all the cases in angular.
I am working with a simple form:
HTML
<mat-card>
<form (submit)="onAddBet(betForm)" #betForm="ngForm">
<mat-form-field>
<textarea #description="ngModel" matInput rows="6" placeholder="Description" name="description" ngModel
required></textarea>
<mat-error *ngIf="description.invalid">Please enter a Bet Description</mat-error>
</mat-form-field>
<mat-slide-toggle #privacy="ngModel" name="privacy" ngModel>Private</mat-slide-toggle>
<mat-slide-toggle #comments="ngModel" name="comments" ngModel>Allow comments</mat-slide-toggle>
<button mat-raised-button color="primary" type="submit">
CREATE
</button>
</form>
</mat-card>
If I press submit without touching any field of the form I get all the fields empty as it should be expected but I would like to get instead of the status of the form, meaning all the fields as "" but in the fields "privacy" and "comments" as false (boolean) (the default appearance of the toggles is as not marked).
I know that this could be easily done by Typescript from the component following the method:
Typescript
onAddBet(form: NgForm) {
if (!form.value.privacy) {
form.value.privacy = false;
console.log(form.value);
} else console.log(form.value);
if (form.invalid) return;
form.resetForm();
}
But I was wondering if there is any HTML attribute to run the same code avoiding to use Typescript
How could I do it?
You can initialize your ngModel in your HTML by using ngModel with a one-way binding
<mat-slide-toggle #privacy="ngModel" name="privacy" [ngModel]="false">Private</mat-slide-toggle>
<mat-slide-toggle #comments="ngModel" name="comments" [ngModel]="false">Allow comments</mat-slide-toggle>
Then in your component
onAddBet(form: NgForm) {
console.log(form.value);
if (form.invalid) return;
form.resetForm();
}
As per the documentation of slide-toggle you can use [checked]="checked" in HTML.
I have a form class with several inputs. There is a Checkbox, which enables/disables Datepicker input (Datepicker is not required) based on boolean variable (switchDate). Even if the Datepicker is disabled, it will be still validated and causing whole form to have status invalid.
My submit form button condition is: [disabled]="productForm.invalid". Unfortunately this button will be disabled without valid Datepicker field.
My question is: how to validate Datepicker field only if it is enabled?
PS I am newbie to Angular
I've tried to change submit button disabled criteria to focus on other fields errors, but this way it will pass any input in Datepicker
I was trying to find some method to check if the Datepicker field is enabled/disabled inside submit button condition, but no luck here
<input type="checkbox"
name="switcherChk"
id="switcherChk"
checked="true"
(change)="changeDatepickerVisibility()" />
<mat-form-field class="example-full-width">
<input matInput [matDatepicker]="picker"
[min]="todaysDate"
placeholder="Example text"
formControlName="userDate"
[attr.disabled]="switchDate ? '' : null"
required = false
>
<mat-datepicker-toggle matSuffix [for]="picker">
<mat-icon matDatepickerToggleIcon>keyboard_arrow_down</mat-icon>
</mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
<mat-error *ngIf="productForm.controls['userDate'].invalid">
Date should be greater or equal to current date.
</mat-error>
</mat-form-field>
Resolved this way (on the Component side):
private changeUserDateValidators(): void{
var dateControl = this.productForm.get(this.UserDateField);
if (this.switchDate) {
dateControl.setValidators(Validators.required);
}
else {
dateControl.clearValidators();
}
dateControl.updateValueAndValidity();
}
Depending on what you want to achieve, you can replace Validators.required to your custom validator.
Hey people I'm facing an issue where Angular material button's color does bot apply in some cases, just like this one:
html:
<mat-card>
<mat-spinner *ngIf="isLoading"></mat-spinner>
<form [formGroup]="form" (submit)="onLogin()" *ngIf="!isLoading">
<mat-form-field>
<input matInput type="email" formControlName="email" placeholder="Email">
<mat-error *ngIf="form.get('email').invalid">Please enter a valid email.</mat-error>
</mat-form-field>
<mat-form-field>
<input matInput type="password" formControlName="password" placeholder="Password">
<mat-error *ngIf="form.get('password').invalid">Please enter a valid password.</mat-error>
</mat-form-field>
<mat-action-row>
<!-- NOT COLORED-->
<button mat-raised-button type="submit" color="warn">Login</button>
</mat-action-row>
</form>
<!-- COLORED-->
<button mat-raised-button type="submit" color="warn">Login</button>
</mat-card>
result:
As you can see, both buttons has same code, but for one the color is applied and for the other one it doesnt, and I want to use that color inside my form... any solutions?
I had a similar problem with the mat-select and mat-options components. I know this post is dated, but this is still a common problem. Sometimes when you add a style to a material component it just doesn't work.
For me, I managed to get it to work by moving my material related styles to the global stylesheet. This seems to work consistently.
problem solved by adding :
this.form = this.fb.group({
email: ['', [Validators.required]],
password: ['', [Validators.required]]
});
in the compponent.ts file
I am building a component (html, css, spec.ts, ts) in angular in which I always want endDate > startDate. I have followed this link https://material.angular.io/components/datepicker/overview in order make multiple datepickers.
Below is my HTML for startDate and endDate:
startDate:
<div class="start-date" fxFlex="50%" fxFlexOrder="1">
<mat-form-field>
<input matInput [matDatepicker]="picker1" placeholder="{{'PORTAL.STARTDATE' | translate}}" type="text" formControlName="startDate" [(ngModel)]="unavailability.startDate" [readonly]="!componentPermission.writePermission">
<mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
<mat-datepicker #picker1></mat-datepicker>
</mat-form-field>
</div>
endDate:
<div class="end-date" fxFlex="50%" fxFlexOrder="2">
<mat-form-field>
<input matInput [matDatepicker]="picker2" placeholder="{{'PORTAL.ENDDATE' | translate}}" type="text" formControlName="endDate" [(ngModel)]="unavailability.endDate" [readonly]="!componentPermission.writePermission">
<mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
<mat-datepicker #picker2></mat-datepicker>
</mat-form-field>
</div>
Now below is my angular code (ts) where I am calling validateForm method on the page load.
ngOnInit() {
....
this.validateForm();
}
validateForm() {
this.unavailabilityForm = this.formBuilder.group({
'startDate': ['', Validators.required],
'endDate': ['', Validators.required],
'unavailabilityReason': ['']
});
}
ProblemStatement:
Now what I need to do is - if I have selected any date in startDate (for example 23rd Nov), then in the endDate datepicker all the dates before and including 23rd Nov should be disabled so that I can only select dates after 23rd Nov only. Is this possible to do in Angular?
Can we achieve that by placing minDate and maxDate somewhere in HTML or TS ?
Binding with [min] works perfect for any date
.ts file
//today's date
todayDate:Date = new Date();
//any date
someDate: Date = new Date(anydate);
.html file
<mat-form-field>
<input matInput [matDatepicker]="picker" [min]="todayDate" placeholder="Appointment date" formControlName="appointment_date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
Since you are using a reactive form, utilize the form controls. It's not recommended to have two bindings (ngModel and formControl). So drop the ngModel like I suggested in a previous question of yours: https://stackoverflow.com/a/47426879/6294072
So populate your form controls with the values of from your object unavailability.
constructor(private formBuilder: FormBuilder) {
this.unavailabilityForm = this.formBuilder.group({
startDate: [this.unavailability.startDate],
endDate: [this.unavailability.endDate]
});
}
if you are receiving the values at a later point you can use patchValues:
this.unavailabilityForm.setValue({
startDate: this.unavailability.startDate;
endDate: this.unavailability.endDate;
})
else you can set the values when you build the form.
Then the only thing you need to add to your second datepicker is [min] like the other answer mentioned. There utilize the form control value:
<input matInput
[min]="unavailabilityForm.controls.startDate.value"
formControlName="endDate" ...>
DEMO
Unless I'm missing something, you can use the [min]="" date property:
<div class="item item-2" fxFlex="50%" fxFlexOrder="2">
<mat-form-field>
<input matInput [min]="startDate" [matDatepicker]="picker2" placeholder="{{'PORTAL.ENDDATE' | translate}}" type="text" formControlName="endDate" [(ngModel)]="unavailability.endDate" [readonly]="!componentPermission.writePermission">
<mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
<mat-datepicker #picker2></mat-datepicker>
</mat-form-field>
</div>
Whatever startDate is will limit the Calendar dates available for endDate. If you need it set before startDate is chosen, use another variable and set it in consturctor() or ngOnInit() of your component.
See: https://material.angular.io/components/datepicker/overview#date-validation
Using the valueChanges of Angular reactive forms and Min feature here is a complete working solution with validation and reactive forms
you can also see the image that the publishedTo only accepts values greater than or equal to any values you set on the PublisedFrom
components.ts
export class AnnouncementformComponent implements OnInit {
constructor(private _formBuilder: FormBuilder){}
Announcementform: FormGroup;
minDate:Date;
this.Announcementform = this._formBuilder.group({
PublishedFrom: ['', Validators.required],
PublishedTo: ['', Validators.required],
});
this.Announcementform.valueChanges.subscribe(res=>{
this.minDate = new Date(res.PublishedFrom);
});
component.html
<mat-form-field appearance="outline">
<input matInput [matDatepicker]="PublishedFrom" placeholder="Publish FROM *"
formControlName="PublishedFrom">
<mat-label>Publish FROM *</mat-label>
<mat-datepicker-toggle matSuffix [for]="PublishedFrom"></mat-datepicker-toggle>
<mat-datepicker #PublishedFrom></mat-datepicker>
</mat-form-field>
<mat-form-field appearance="outline">
<input matInput [matDatepicker]="PublishedTo" placeholder="Publish To *"
formControlName="PublishedTo" [min]="minDate">
<mat-label>Publish TO *</mat-label>
<mat-datepicker-toggle matSuffix [for]="PublishedTo"></mat-datepicker-toggle>
<mat-datepicker #PublishedTo></mat-datepicker>
</mat-form-field>
I am also writing additional code below if someone needs to start his date from a specific date or greater or equal to current date can use simple line of code below
1- create a variable in your component class name it for example startDate
startDate:Date;
ngOnInit() {
//---This will set the datepicker to accept values from current date or above---//
//--- you can also customize the value to set any date you want----//
this.startDate= new Date();
}
then in your component.html file
<mat-form-field appearance="outline">
<input matInput [matDatepicker]="publishdate" placeholder="Publish Date *"
formControlName="publishdate" [min]="startDate">
<mat-datepicker-toggle matSuffix [for]="publishdate"></mat-datepicker-toggle>
<mat-datepicker #publishdate></mat-datepicker>
</mat-form-field>
I used [min]="startDate.value" and worked like expected (disabled endDate calendar previous dates from selected date in startDate Calendar)
Latest version accept minDate and maxDate as Properties
https://material.angular.io/components/datepicker/api
<mat-calendar [minDate]="theDateYouWant"></mat-calendar>
<mat-form-field >
<input placeholder="Enter Date" matInput
[matDatepicker]="picker1"
formControlName="voucherExpirationDate"
[min]="minDate">
<mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
<mat-datepicker #picker1></mat-datepicker>
</mat-form-field>
first date
<mat-form-field appearance="outline" class="w-100">
<mat-label>1st installment date</mat-label>
<input matInput [matDatepicker]="firstDate (focus)="firstDate.open()"
placeholder="Select 1st installment date"
formControlName="fstInstalmentDate" readonly required>
<mat-datepicker-toggle matSuffix [for]="firstDate"></mat-datepicker-toggle>
<mat-datepicker #firstDate></mat-datepicker>
</mat-form-field>
2nd date
<mat-form-field appearance="outline" class="w-100">
<mat-label>2nd installment date</mat-label>
<input matInput [matDatepicker]="secondDate" (focus)="secondDate.open()"
placeholder="Select 2nd installment date"
[min]="settingForm?.get('fstInstalmentDate')?.value"
formControlName="scndInstalmentDate" readonly required>
<mat-datepicker-toggle matSuffix [for]="secondDate"></mat-datepicker-toggle>
<mat-datepicker #secondDate></mat-datepicker>
</mat-form-field>
Here settingForm is my formgroup name, Just one line change in second date no need to write anything in .ts file
//today's date in your component.ts file declare varaible which stores present //date
presentDate:Date = new Date();
//and in component.html write [min]= "presentDate" in input of type date
<input matInput [matDatepicker]="picker" [min]="presentDate" placeholder="Appointment date" formControlName="appointment_date">
<mat-datepicker-toggle matSuffix [for]="picker">
<mat-datepicker #picker>