I want to manage requirement if either of input has any value second of them has to fill like that in angularJS
Please help me what kind of approaches are the best in angular way!
Here is my code
<div class="form-group recipe_item" ng-repeat="recipe in pc.recipes">
<div class="form-group">
<label class="col-sm-4 control-label">Select Product</label>
<div class="col-sm-8" ng-controller="ProductCtrl as pc">
<select class="form-control" ng-model="recipe.partId"
ng-options="item.id as item.name for item in pc.products"
>
<option value="">-- choose product --</option>
</select>
</div>
</div>
<div class="form-group">
<label id="lbl_qty" class="col-sm-4 control-label">Quantity</label>
<div class="col-sm-8">
<input type="number" class="form-control" ng-model="recipe.qty" {{isValidNumber(recipe.partId)}}/>
</div>
</div>
</div>
and my controller
$scope.isValidNumber = (number) =>
return number > 0
you can use ng-required... this is what you need... here is PLUNKER example...
I updated example by adding angularjs form controller and here is form controller documentation for more details...
Related
I have these two elements (select and a text field) I want to disable the text box if the name the user selects from the drop down is "Other".
ex. clModal.idustryName !== 'Other'
Currently I only know how to get the ceModal.industryId because that is what I'm saving. How can I reference the name?
Here are my two elements
<div class="form-group col-md-4">
<label for="ceIndustry">Industry</label>
<select class="form-control" [(ngModel)]="ceModal.industryId" (ngModelChange)="markDirty()" name="ceIndustry" #ceIndustry="ngModel" required>
<option [ngValue]=null>None selected</option>
<option *ngFor="let industry of industryList" [value]="industry.code">{{industry.name}}</option>
</select>
<div [hidden]="ceIndustry.valid || ceIndustry.pristine" class="alert alert-danger">Industry is required</div>
</div>
<div class="form-group col-md-4">
<label for="ceIndustryOther">Industry Other</label>
<input type="text" class="form-control" placeholder="ex. Other industry info" [(ngModel)]="ceModal.industryOther" (ngModelChange)="markDirty()" name="ceIndustryOther" [disabled]="(clModal.idustryName !== 'Other')">
</div>
I'm working on a Laravel application. In my view i have a form, what I'm trying to do is when submitting the form and one field is not valid, it returns the values of valid fields, so the user will have to edit the wrong field only, not the full form.
This is my form and an example. In here, the user didn't enter the url, so it shows an error message and return the values of the correct fields (client, domain provider, etc...) The problem i'm facing is this is not working for the avatar field and service field!
I'm returning the value by adding value="{{ old('client') }}" to the input tag , as shown in code below:
<div class="form-group row">
<label class="col-lg-3 col-form-label">Client:</label>
<div class="col-lg-9">
<input type="text" class="form-control" name="client" value="{{ old('client') }}">
<small class="error">{{$errors->first('client')}}</small>
</div>
</div>
QUESTION: How to add it for avatar and select service fields?
Avatar: - currently its not returning the value
<div class="form-group row">
<label class="col-lg-3 col-form-label">Attach avatar:</label>
<div class="col-lg-9">
<input type="file" class="form-input-styled" data-fouc="" name="avatar" value="{{ old('avatar') }}">
<small class="error">{{$errors->first('avatar')}}</small>
</div>
</div>
Select service:
<div class="form-group row">
<label class="col-lg-3 col-form-label">Select Service:</label>
<div class="col-lg-9">
<select data-placeholder="Select service" class="form-control form-control-select2" data-fouc="" name="service" >
<option></option>
<option value="Website">Website</option>
<option value="Application">Application</option>
</select>
<small class="error">{{$errors->first('service')}}</small>
</div>
</div>
For the select tag ,
you must put a condition for every option tag ,
if the last submitted value is equal to this option value put selected
attribute to this option
something like that ....
<div class="form-group row">
<label class="col-lg-3 col-form-label">Select Service:</label>
<div class="col-lg-9">
<select data-placeholder="Select service" class="form-control form-control-select2" data-fouc="" name="service" >
<option></option>
<option value="Website" {{ old('service') == "Website" ? "selected" : ""}}>Website</option>
<option value="Application" {{ old('service') == "Application" ? "selected" : "">Application</option>
</select>
<small class="error">{{$errors->first('service')}}</small>
</div>
</div>
hi for select tag this work for me
<div class="form-group row">
<label class="col-lg-3 col-form-label">Select Service:</label>
<div class="col-lg-9">
<select data-placeholder="Select service" class="form-control form-control-select2" data-fouc="" name="service" >
<option></option>
#foreach($Listservice as $key)
<option value ="{{$key->id}}"> {{$key->Website}}
{{$key>Application}}</option>
#endforeach
</select>
</div>
</div>
and in your model add these
$listservice = Service::get();
i hope it s help
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 am working on a angular2 App and I am using primeng for UI elements. I have dropdowns where I am using the options in these dropdowns are dynamically generated from an API call. Now, when I click the submit button, I want it to validate the forms before submitting. So I am using 'required="required"' in order to make the validation happen.
I see that, if the data is not loaded into the dropdowns, the validation works fine, but when the data is loaded and dropdown options are populated, the primeng validation breaks and it does not throw any message.
Here's my html code..
<div method="post" class="content-form">
<div class="col-lg-6">
<form #myForm="ngForm" class="form-horizontal" novalidate>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">System of Origin</label>
<div class="col-sm-10">
<p-dropdown class="contentDetails" [options]="systemOfOrigins" [(ngModel)]="defaultSoO" [ngModelOptions]="{standalone: true}" required="required" filter="filter" placeholder="NONE"></p-dropdown>
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Content Type</label>
<div class="col-sm-10">
<p-dropdown class="contentDetails" [options]="contentTypes" [(ngModel)]="selectedContentType" [ngModelOptions]="{standalone: true}" filter="filter" required="required" placeholder="Choose"></p-dropdown>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Rendition</label>
<div class="col-sm-10">
<p-dropdown id ="rendition" placeholder="Select Rendition" class="contentDetails" [options]="renditions" [(ngModel)]="renditionSelected" [ngModelOptions]="{standalone: true}" filter="filter" required="required"></p-dropdown>
</div>
</div>
</form>
Am I not using the required attribute properly or is there any other way to do it with API calls ?
Help is appreciated
This issue happens if there is a dummy first element in the options array that is used to display please select text, and the label in that dummy element is having some value in it. So just set the label value as '' or null or undefined. It will work.
Try
<p-dropdown [required]="true">
required is a boolean property. If you are setting it dynamically, [required]="isRequired", otherwise required="true" should do it for you.
Try replacing required="required" with required="true" and seeing if that makes them required. If not, I suggest adding a plunkr
I have single select using AngularJs ng-options that is working good but my requirement is to make multiselect using AngularJs , How can i achieve that task using ng-options ?
main.html
<div class="row">
<div class="form-group col-md-12 fieldHeight">
<label for="originatingGroup" class="required col-md-4">Originating group:</label>
<div class="col-md-8" disable-control-point="CHALLENGES_EDIT">
<select
class="form-control"
name="OriginatingGrp"
id="OriginatingGrp"
ng-model="challengesDTO.originatingGrpLkupCode"
ng-options="OriginatingGroupOption.id as OriginatingGroupOption.text for OriginatingGroupOption in challengeGroupOptions">
<option value="">
Select...
</option>
</select>
</div>
</div>
</div>
Just add "multiple"
<select multiple
class="form-control"
name="OriginatingGrp"
id="OriginatingGrp"
ng-model="challengesDTO.originatingGrpLkupCode"
ng-options="OriginatingGroupOption.id as OriginatingGroupOption.text for OriginatingGroupOption in challengeGroupOptions">
<option value="">
Select...
</option>
</select>
challengesDTO.originatingGrpLkupCode must and will be an array