The scenario i am working on is -> on selection of the date on mat datepicker i want to make a http call which performs a few calculations
Trying to do this using (selectedChanged), but doesn't seem working, wanted help on how i could fix this, thanks in advance
The below is the HTML code where i am trying to do this
<div class="form-group m-form__group row">
<div class="col-lg-4 m-form__group-sub">
<mat-form-field class="example-full-width" appearance="outline">
<mat-label>Policy Start Date</mat-label>
<input matInput [min]="minDate" [max]="maxDate
[matDatepicker]="picker4"
placeholder="Choose a date" formControlName="policy_start_date" >
<mat-datepicker-toggle matSuffix [for]="picker4" >
</mat-datepicker-toggle>
<mat-datepicker #picker4 (selectedChanged)="currentPeriodClicked()">
</mat-datepicker>
</mat-form-field>
</div>
MatDatepicker does not have a selectedChanged event. Try using either the dateChange or dateInput event on MatDatepickerInput instead:
<mat-form-field class="example-full-width" appearance="outline">
<mat-label>Policy Start Date</mat-label>
<input matInput [min]="minDate" [max]="maxDate
[matDatepicker]="picker4"
(dateChange)="currentPeriodClicked()"
placeholder="Choose a date"
formControlName="policy_start_date" >
<mat-datepicker-toggle matSuffix [for]="picker4" ></mat-datepicker-toggle>
<mat-datepicker #picker4></mat-datepicker>
</mat-form-field>
See: https://v6.material.angular.io/components/datepicker/overview#input-and-change-events.
Related
I am trying to test a form in Vue, using the forms from the Bootstrap-Vue library.
I have made a an event for the form (submit) and I added a function to this event (addText).
Then I made a method for this function, telling it to log my input data to the console, but when I press the "save" button and go into the console nothing has been logged.
This used to work with Materialize, so I am wondering if the error lies somewhere with the Bootstrap forms.
Any help will be much appreciated.
<template>
<b-container fluid>
<h2>Add or edit content for this section</h2>
<b-form-group #submit="addText">
<div class="fieldHeadline">
<label for="headline">Add headline</label>
<b-form-input type="text" name="headline" v-model="headline"></b-form-input>
</div>
<div class="fieldSecodnaryHeadline">
<label for="secondaryHeadline">Add secondary headline</label>
<b-form-input type="text" name="secondaryHeadline" v-model="secondaryHeadline"></b-form-input>
</div>
<div class="fieldText">
<label for="text">add text</label>
<b-form-input type="text" name="text" v-model="text"></b-form-input>
</div>
<b-button variant="success">Save</b-button>
</b-form-group>
</b-container>
</template>
<script>
export default {
name: 'NewsSectionCreate',
data() {
return {
headline: null,
secondaryHeadline: null,
text: null
}
},
methods: {
addText(){
console.log(this.headline, this.secondaryHeadline, this.text)
}
}
}
</script>
b-form-group is not a form it's layout that structures the label and inputs, in order to submit that inputs you should wrap the b-form-group tags with a b-form component which has #submit event:
<b-form #submit="addText">
<b-form-group >
<div class="fieldHeadline">
<label for="headline">Add headline</label>
<b-form-input type="text" name="headline" v-model="headline"></b-form-input>
</div>
<div class="fieldSecodnaryHeadline">
<label for="secondaryHeadline">Add secondary headline</label>
<b-form-input type="text" name="secondaryHeadline" v-model="secondaryHeadline"></b-form-input>
</div>
<div class="fieldText">
<label for="text">add text</label>
<b-form-input type="text" name="text" v-model="text"></b-form-input>
</div>
<b-button type="submit" variant="success">Save</b-button>
</b-form-group>
</b-form->
don't forget to add type="submit" to the b-button component.
I am using an input for the date. How do we set the Input to display the Date Today? Thank you for your time.
<div class="form-group">
<label>Debarred</label>
<input v-model="form.debarred" type="date" name="debarred"
placeholder="Debarred"
class="form-control" :class="{ 'is-invalid': form.errors.has('debarred') }">
<has-error :form="form" field="debarred"></has-error>
</div>
You can update the model value form.debarred on page load like:
this.form.debarred = new Date().toLocaleDateString('en-CA');
//==> "2020-04-03"
Now, using .toLocaleDateString('en-CA') is need here as <input type="date"> value can only accept a string representing a date in YYYY-MM-DD format, or empty.
DEMO:
const debarred = document.querySelector('[name=debarred]');
debarred.value = new Date().toLocaleDateString('en-CA');
<div class="form-group">
<label>Debarred</label>
<input type="date" name="debarred" placeholder="Debarred" class="form-control">
<has-error :form="form" field="debarred"></has-error>
</div>
I have an input field in a form which is filled but disabled (I am trying to build details view). In the code below titleAccessor.valid returns false.
Any ideas how to overcome this issue ?
<div class="form-group row">
<label class="col-md-3 form-control-label" for="title">{{'contentSalesTextConfig.titleForm'|translate}}</label>
<div class="col-md-9">
<input [disabled]="pageStatus==4" required [ngClass]="{'redBorder': ((titleAccessor.touched||formSubmitted)&&!titleAccessor.valid)}" [ngModel]="textContentMain.title" #titleAccessor="ngModel" name="title" id="title" type="text" class="form-control" placeholder="{{'contentSalesTextConfig.placeHolder.titleForm'|translate}}">
</div>
</div>
NOTE: When i remove [disabled]="pageStatus==4" validation works as it is supposed to..
disabled inputs are considered as invalid inputs , you can use readonly instead of disabled :
<input [readonly]="pageStatus==4" required [ngClass]="{'redBorder': ((titleAccessor.touched||formSubmitted)&&!titleAccessor.valid)}" [ngModel]="textContentMain.title" #titleAccessor="ngModel" name="title" id="title" type="text" class="form-control" placeholder="{{'contentSalesTextConfig.placeHolder.titleForm'|translate}}">
hope this will help :)
I am using template driven forms for adding the task, and there are 2 input fields of type number for estimated mins to complete task,
one field is for estimated number of hrs and
another is for estimated minutes to complete the task
since the task estimate can be done either in hours like 1hrs , or in hours and minutes like 1Hrs 30Mins , so i want to set attribute required to inputs conditionally. So one of the 2 inputs must be set or form validation error will occur if both inputs are empty when submitting form.
so far i have done this but validation is not working
<form class="add-task" (ngSubmit)="onSubmit(newtask)" #newtask="ngForm">
<div class="estimate-container">
<input
type="number"
min="0"
max="10"
id="estimate_hrs"
ngModel
name="estimate_hrs"
mdInput
[required]="!estimateMins.valid"
placeholder="Estimated Hours"
#estimateHrs="ngModel"
>
<div class="error-msg" *ngIf="!estimateHrs.valid && !estimateMins.valid">
Please enter estimated hours
</div>
<input
type="number"
min="0"
max="60"
id="estimate_min"
ngModel
name="estimate_min"
mdInput
[required]="!estimateHrs.valid"
placeholder="Estimated Minutes"
#estimateMins="ngModel"
>
<div class="error-msg" *ngIf="!estimateMins.valid && !estimateHrs.valid">
Please enter estimated minutes
</div>
</div>
<button type='submit' [disabled]="!newtask.valid" >Submit</button>
</form>
Try using [attr.required] instead.
<input
type="number"
min="0"
max="10"
id="estimate_hrs"
ngModel
name="estimate_hrs"
mdInput
[attr.required]="!estimateMins.valid"
placeholder="Estimated Hours"
#estimateHrs="ngModel"
>
This is my working solution for Angular 5:
In component:
#Input()
required: boolean;
In template on the input (or select) element that:
[required]="required"
On the selector:
[required]="true"
Like #DeborahK double checked, no need for single quotes :-)
You need to put your !estimateMins.valid in single quotes like:
[required]="'!estimateMins.valid'" and [required]="'!estimateHrs.valid'"
See this plunkr
I spent some time trying this out because the basic syntax should have worked. I initially did a simply plunker just to test the syntax and the syntax does indeed work as defined.
After expanding the plunker to more closely match the OP's code: https://plnkr.co/edit/QAqeBYrg19dXcqbubVZ8?p=preview
<Links to plunker must be accompanied by code>
It became apparent that it is not a syntax error. Rather it is a logic error.
When the form first appears, both controls are valid so neither of them have the required attribute. So then neither are required and it appears that it does not work.
There are several possible ways to resolve this. One is to build a custom validator that does the cross field validation.
You can use [required]=boolean.
In angular2 or above you can use ngNativeValidate directive for template driven form. And also object to reserved and sending data(though it's your personal choice but i love this way) to api.
<form class="add-task" #newtask="ngForm" ngNativeValidate (ngSubmit)="onSubmit()">
<div class="estimate-container">
<input
type="number"
min="0"
max="10"
id="estimate_hrs"
name="estimate_hrs"
mdInput
[required]="!taskModel.estimateMins"
placeholder="Estimated Hours"
[(ngModel)]="taskModel.estimateHrs">
<div class="error-msg" *ngIf="!taskModel.estimateHrs && !taskModel.estimateMins">
Please enter estimated hours
</div>
<input
type="number"
min="0"
max="60"
id="estimate_min"
name="estimate_min"
mdInput
[required]="!taskModel.estimateHrs"
placeholder="Estimated Minutes"
[(ngModel)]="taskModel.estimateMins">
<div class="error-msg" *ngIf="!taskModel.estimateMins && !taskModel.estimateHrs">
Please enter estimated minutes
</div>
</div>
<button type='submit' [disabled]="!newtask.valid" [isFormValid]="!newtask.valid">Submit</button>
</form>
In .ts file
taskModel: any;
onSubmit(){
console.log(this.taskModel) // this object has all data.
}
You can also achieve the same with in AngularJS (version 1.x)
<form id="form" name="form" class="add-task" ng-init="taskModel={}">
<div class="estimate-container">
<input
type="number"
min="0"
max="10"
id="estimate_hrs"
name="estimate_hrs"
mdInput
ng-required="!taskModel.estimateMins"
placeholder="Estimated Hours"
ng-model="taskModel.estimateHrs">
<div class="error-msg" ng-if="!taskModel.estimateHrs && !taskModel.estimateMins">
Please enter estimated hours
</div>
<input
type="number"
min="0"
max="60"
id="estimate_min"
name="estimate_min"
mdInput
ng-required="!taskModel.estimateHrs"
placeholder="Estimated Minutes"
ng-model="taskModel.estimateMins">
<div class="error-msg" ng-if="!taskModel.estimateMins && !taskModel.estimateHrs">
Please enter estimated minutes
</div>
</div>
<button ng-disabled="form.$valid" ng-click="form.$valid && onSubmit()" >Submit</button>
</form>
Hope it's helpful to you!
I'm using ASP classic, I need to send a file and get the textfields to insert on a DB, I did put the ENCTYPE="multipart/form-data" on the form but when I submit it gives me this error:
"Wrong Content-Type. Make sure you have included the attribute
ENCTYPE="multipart/form-data" in your form."
What is strange is that when a leave up the textfields and keep just the file fields it works.
Form:
<div data-role="content">
<form method="post" ENCTYPE="multipart/form-data" action="formteste.asp" >
<div class="ui-field-contain">
<label for="text-4">text1:</label>
<input type="text" data-clear-btn="true" name="text1" value=""></div>
<div class="ui-field-contain">
<label for="text-4">text2:</label>
<input type="text" data-clear-btn="true" name="text2" value=""></div>
<div class="ui-field-contain">
<label for="date-4">Date:</label>
<input type="date" data-clear-btn="true" name="date" id="date-1" value=""></div>
<input type="file" data-clear-btn="true" name="file-1" id="file-1" value="">
<input type="submit" data-inline="true" value="Go">
</form>
</div>
and ASP:
Set Upload = Server.CreateObject("Persits.Upload.1")
text1 = Upload.Form("text1")
Upload.OverwriteFiles = False
On Error Resume Next
Upload.SetMaxSize 1048576 ' Limit files to 1MB
Upload.Save("c:/")
For Each File in Upload.Files
arquive = File.FileName
next
For Each Item in Upload.Form
Response.Write Item.Name & "= " & Item.Value & "<BR>"
Next
If Err <> 0 Then
%>
<div>"<% = Err.Description %>"</div>
<% end if%>
I've searched a lot for this, but none could help with my issue, I hope to get some response.
From the AspUpload Reference
IMPORTANT: The Upload.Files and Upload.Form collections are populated by the Upload.Save method. Therefore, it is incorrect to reference either collection before the Save method is called.