I am facing this issue with required tag. I want to make the quality field as mandatory without the valid option selected from the list the update billing button should not be enabled. Am I missing anything in the code? Please check the else condition part
I will be thankful for the help here.
else
{
<div class="form-horizontal" ng-class="{'has-error':Edit.Quality.$invalid &&
Edit.Quality.$dirty}">
<div class="form-group">
<label class="control-label col-lg-2 pull-left">Quality<span class="Imp">*</span></label>
<div class="col-lg-8">
<select id="Quality" name="Quality" class="form-control" style="width:170px" ng-model="vm.EditRef_UI.Quality" tooltip="Quality is required"
tooltip-placement="top" tooltip-trigger="mouseenter" required>
<option selected disabled value="">(Select a Timeline)</option>
<option value="Satisfactory">Satisfactory</option>
<option value="NotSatisfactory">Not Satisfactory</option>
</select>
</div>
</div>
</div>
}
button code:
<button type="button" class="btn btn-primary" data-dismiss="modal" data-ng-click="vm.Edit()" ng-disabled="Edit.$invalid" id="ticketEditbtn">Update Billing</button>
Angular does the string bindings as this article suggested, thus satisfying the condition by the value being passed. This prevents the required from firing, thinking that there was value in the selected option.
you can use loke this :
<select id="Quality" name="Quality" class="form-control" style="width:170px" ng-model="vm.EditRef_OCBUI.Quality" tooltip="Quality is required"
tooltip-placement="top" tooltip-trigger="mouseenter" required="required">
i wil be work
Related
I have a form which contain a date picker / calender, email, city name and hotel name, I want a user to select a date and enter other fields and submit the data.
This is what I have.
HTML:
<form [formGroup]="angForm" class="form-element">
<div class="form-group">
<label for="dateOfBirth">Date of Birth</label>
<input id="dateOfBirth" name="dateOfBirth" [(ngModel)]="dateOfBirth" type="text" bsDatepicker class="form-control" />
</div>
<div class="form-group form-element_email">
<input type="email" class="form-control info" placeholder="Email" formControlName="email" #email (ngModelChange)="onChange($event)">
</div>
<div *ngIf="angForm.controls['email'].invalid && (angForm.controls['email'].dirty || angForm.controls['email'].touched)"
class="alert alert-danger">
<div *ngIf="angForm.controls['email'].errors.required">
Email is required.
</div>
</div>
<div class="input-group mb-3 form-element_city">
<select class="custom-select" id="inputGroupSelect01" #cityName>
<option selected *ngFor="let city of cities" [ngValue]="city.name">{{city.name}}</option>
</select>
</div>
<div class="input-group mb-3 form-element_hotel">
<select class="custom-select" id="inputGroupSelect01" #hotelName>
<option selected *ngFor="let hotel of hotels" [ngValue]="hotel.name">{{hotel.name}}</option>
</select>
</div>
<div class="form-group">
<button type="submit" (click)="addReview(email.value, cityName.value , hotelName.value)" class="btn btn-primary btn-block form-element_btn"
[disabled]="!validEmail">Book</button>
</div>
</form>
This dispalys the following result: wrong one
Instead of that input with date picker , I just want the full calender to be display on the left side ,
Here is what I want . Good one
I tried many solution online I could not be able to solve my problem,
What do I need to change in my code to get the result I want? please Am newbie though, thanks
You can actually provide placement in the element which uses bdDatepicker directive.
Just set this placement property to left value.
Here is example in documentation.
https://valor-software.com/ngx-bootstrap/#/datepicker#placement
I have a dropdown in my form which was generated by the html form builder:
<select class="form-control">
<option value="" selected="1" disabled="1">Select option</option>
<option value="course 1">course 1</option>
<option value="course 2">course 2</option>
<option value="course 3">course 3</option>
</select>
Is there a simple way to ensure that the user selects a value in the dropdown before submitting the form? If he has not selected anything, then display an error message.
Also, I have an input field:
<div class="form-group field-x_street_name_1">
<label for="x_street_name_1" class="col-sm-2 col-form-label col-form-label-lg">Street 1 <span style="color:red;">*</span></label>
<div class="col-sm-10">
<input type="text" name="x_street_name_1" t-att-value="x_street_name_1" id="x_street_name_1" class="form-control form-control-lg" placeholder="e.g. John Lane" required="required" t-att-readonly="'readonly' if only_passwords else None" t-att-autofocus="'autofocus' if login and not only_passwords else None"/>
</div>
</div>
I want to ensure the user enters only between 10 to 30 uppercase, lowercase alphabets. I would ensure that using html pattern simply. But it does not seem to work.
I'm working on my first angular project. I created a form where the user can choose from a dropdown list. I added an option on each drop down to choose "other" and type in a textbox.
This creates a situation where the user could choose values from the dropdown and use the textbox at the same time. I have a function on my submit button where I need to store the values that the user is passing.
The problem I'm having is that if the user selected from the dropdown, the value is an ID value but the textbox returns a name. Also, I'm not sure how to handle the values because my backend API is expecting four text values. If the user has two dropdown entries and two textbox entries, what's a good way to get the right values to the API?
I thought about passing every possible value into the function but I'm not sure what sort of logic I could add to only get the 4 values I need.
<div class="form-group">
<label class="control-label" for="Country">Category:</label><!--<input type="text" #category (change)="CountryTextAreaFilled(category.value)">-->
<select *ngIf="getCountryss()" [(ngModel)]="selectedCountry" (change)="onSelectCountry($event.target.value)" class="form-control input-lg" id="Country">
<option value="0">Select Country</option>
<option *ngFor="let Country of getCountryss()" value= {{Country.id}}>{{Country.name}}</option>
<option value="others">Other- Please Specify Below</option>
</select>
</div>
<div class="form-group" *ngIf="selectedCountry == 'others'">
<label for="name">Enter Category:</label>
<input type="text" #category class="form-control" [(ngModel)] = "userCategory" (change)="CountryTextAreaFilled(userCategory)">
</div>
<div class="form-group">
<label class="control-label" for="ProviderType">Type:</label>
<select *ngIf="type" [(ngModel)]="selectedType" (change)="onSelectProviderType($event.target.value)" class="form-control input-lg" id="type">
<option value="0">Select Type</option>
<option *ngFor="let type of type" value= {{type.id}}>{{type.name}}</option>
<option value="others">Other- Please Specify Below</option>
</select>
</div>
<div class="form-group" *ngIf="selectedType == 'others'">
<label for="name">Enter Type:</label>
<input type="text" #type class="form-control" [(ngModel)] = "userType" [disabled]="providerInputStatus" (change)="CountryTextAreaFilled(userType)">
</div>
<div class="form-group">
<label class="control-label" for="State">State:</label>
<select *ngIf="type" [(ngModel)]="selectedState" (change)="onSelectState($event.target.value)" class="form-control input-lg" id="State">
<option value="0">Select Classifcation</option>
<option *ngFor="let State of State" value= {{State.id}}>{{State.name}}</option>
<option value="others">Other- Please Specify Below</option>
</select>
</div>
<div class="form-group" *ngIf="selectedState == 'others'">
<label for="name">Enter State:</label>
<input type="text" #State class="form-control" [(ngModel)] = "userState" [disabled]="categoryInputStatus" (change)="CountryTextAreaFilled(userState)">
</div>
<div class="form-group">
<label class="control-label" for="Location">Location:</label>
<select [(ngModel)]="selectedLocation" class="form-control input-lg" id="Location">
<option value="0">Select Location</option>
<option *ngFor="let Location of Location" value= {{Location.id}}>{{Location.name}}</option>
<option value="others">Other- Please Specify Below</option>
</select>
</div>
<div class="form-group" *ngIf="selectedLocation == 'others'">
<label for="name">Enter Location:</label>
<input type="text" #Location class="form-control" [(ngModel)] = "userLocation" [disabled]="specializationInputStatus" (change)="CountryTextAreaFilled(userState)">
</div>
<button type="submit" class="btn btn-success" (click)="saveCountry(userCategory, userType, userState, userLocation, selectedCountry, selectedType, selectedState, selectedLocation)">Submit</button>
<br>
<h3 *ngIf = "isAdded" >{{confirmationString}}</h3>
<a routerLink = "/angular"> < back</a>
Your question is a little ambiguous but I will try to help you out.
If your server is expecting String/text values then you need to handle it in the frontend and send it what it expects. So you should have to set logic to transform to string your numeric the function:
saveCountry(userCategory, userType, userState, userLocation, selectedCountry, selectedType, selectedState, selectedLocation) {
if(selectedCountry!=='others') {
selectedCountry = selectedCountry.toString();
} else {
selectedCountry = userState;
}
and so on for the rest of values.
To get the string value you have to set it in the value of the option element and then that value will be assigned to the selectedCountry model when selecting it from the dropdown:
<select *ngIf="getCountryss()" [(ngModel)]="selectedCountry" (change)="onSelectCountry($event.target.value)" class="form-control input-lg" id="Country">
<option value="0">Select Country</option>
<option *ngFor="let Country of getCountryss()" value="{{Country.name}}">{{Country.name}}</option>
<option value="others">Other- Please Specify Below</option>
</select>
Now you will have access to that country string in your saveCountry(...) function.
Everything looks fine except for the body part. If a user enters "Grab a beer with you", the body of the email would show "Grab+a+beer+with+you". How do I get the body to be just a space instead of a +. I'm also confused on what I should be using, some places say it should be a POST, but GET works, POST doesn't. Anyways, here is my code.
<form enctype="text/plain" method="GET" action="mailto:{rudyg#hotmail.com}?subject=Subject&body=Body">
<div class="form-group">
<label for="exampleSelect1">What is this in regards to?</label>
<select class="form-control" id="exampleSelect1" name="subject" value="Subject">
<option value="Job opportunity">Job opportunity</option>
<option value="Question about myself or my code">Question about myself or my code</option>
<option value="General Question">General Question</option>
<option value="">No subject</option>
</select>
</div>
<div class="form-group">
<label for="exampleTextarea">What would you like to say?</label>
<textarea class="form-control" id="exampleTextarea" name="body" value="Body" rows="4" placeholder="I'd like to speak with you about an exciting job opportunity."></textarea>
</div>
<button type="submit" class="btn btn-primary" name="submit" value="Submit">Submit</button>
</form>
Sorry, I meant to say that I also tried the enctype="text/plain", but it still gives me pluses in the body of the email.
change the enctype attribute in the form tag to text/plain , Like :
enctype="text/plain"
I have a dropdown in which when I select 'one' only then my input appears. That input is required field. What I want is when user select 'one' only then validation on the input works and hence on save button it shows error but if it selects other values or no value then on save it doesn't show validation error. My code is working correctly but only when I click on save button twice.If I click on the save once then it shows error even if I dont select anyone or select other one.
<form name="myForm" data-ng-submit="save(myForm.$valid)"novalidate="novalidate">
<div class="form-group">
<label class="col-md-6">Select:</label>
<select class="col-md-2" ng-model="val.value">
<option value="1" selected>one</option>
<option value="2">two</option>
<option value="3">three</option>
<option value="4">four</option>
</select>
<div ng-show="val.value=='1'">
<label class="col-md-3">one:</label>
<input type="number" class="col-md-4" ng-model="val.one" name="valOne" data-ng-class="{'has-error':myForm.valOne.$dirty && myForm.valOne.$invalid }" ng-required="val.value=='1'"/>
<div class="col-md-2" data-ng-messages="myForm.valOne.$error"
data-ng-show="myForm.valOne.$touched ||myForm.$submitted">
<div class="error-message" data-ng-message="required">Please enter Value
</div>
</div>
</div>
</div>
<button type="submit" class="btn btn-warning"><i class="fa fa-save"></i>
Save</button>
</form>
Please recommend something.