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
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 Have an option list of category to select the category of a book. when i try with observable the option list become empty,but if i try with array it is working fine without any problem.Why it is happening.Is the observable is not suitable for option list.
the below code does not work as we expected!
category$: Observable<categoryModel[]>;
<div class="form-group">
<label for="option-role">Category:</label>
<select class="form-control form-control-sm" id="options" formControlName="category" required
[ngClass]="{'is-invalid':submitted && f.category.errors}">
<option value="" disabled>select</option>
<option *ngFor="let category of category$ | async" [ngValue]="category ">{{category ?.name}}</option>
</select>
<div *ngIf="submitted && f.category.errors" class="invalid-feedback">
<div *ngIf="f.category.errors.required">Please select atleast one Category</div>
</div>
</div>
but if i try the same code with a plain category Array it is working with out any problem.The below code is working with out any problem
category$:Observable<categoryModel[]>;
this.category$.subscribe(category=>{
this.categoryArray=category;});
<div class="form-group">
<label for="option-role">Category:</label>
<select class="form-control form-control-sm" id="options" formControlName="category" required
[ngClass]="{'is-invalid':submitted && f.category.errors}">
<option value="" disabled>select</option>
<option *ngFor="let category of categoryArray" [ngValue]="category ">{{category ?.name}}</option>
</select>
<div *ngIf="submitted && f.category.errors" class="invalid-feedback">
<div *ngIf="f.category.errors.required">Please select atleast one Category</div>
</div>
</div>
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 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
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...