I have a Table Filter in Angular Material :-
I want an icon at the right side of this filter, like below :-
I have tried with many configurations, without luck.
<mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
<span class="input-group-append">
<button class="btn" (click)="doSomething()">
<i class="fa fa-plus fa-fw"></i>
</button>
</span>
</mat-form-field>
Is there any simple way to achieve this?
Material 2 supports that in their documentation
<mat-form-field class="example-form-field">
<input matInput type="text" placeholder="Clearable input" [(ngModel)]="value"/>
<button mat-button *ngIf="value" matSuffix mat-icon-button aria-label="Clear" (click)="value=''">
<mat-icon>close</mat-icon>
</button>
</mat-form-field>
https://material.angular.io/components/input/examples
https://stackblitz.com/angular/eyrxeklkoyq?file=app%2Finput-clearable-example.ts
Related
I have a form that contains an email input and a submit button. On Iphone, when I type something on email and delete it, button slide down a little bit. I use tailwind css and what causes this problem?
<form wire:submit.prevent="submit">
<span class="inline-grid">
<input type="text" name="email" wire:model.defer="email" class="form-control relative flex-auto desktop:rounded-lg below-desktop:rounded placeholder-gray-300 desktop:h-14 below-desktop:h-8 xl:w-72 small-desktop:w-60" placeholder="{{__('E-mail')}}" aria-label="Search" aria-describedby="button-addon2" style="border-radius: 4px;">
</span>
<button type="submit" class="bg-blue-400 text-base desktop:rounded-lg below-desktop:rounded text-white desktop:h-14 below-desktop:h-8 px-6 desktop:ml-2 xl:w-32 small-desktop:w-24" style="border-radius: 4px;">{{ __('Send') }}</button>
</form>
I am creating multiple steps form with livewire. In the third step, I am uploading the image via livewire and also previewing the image on the image selected.
After previewing the image, when I move to the first or second step it returns the error - [Serialization of 'Livewire\TemporaryUploadedFile' is not allowed]
Please help me, with how I can solve this issue.
<div class="form-row pl-2 pr-2 reward-engagement mt-3">
<div class="col-md-9 mb-3">
<label for="validationDefault01"><small>UPLOAD IMAGE</small></label>
<div class="input-group input-group-merge">
<input type="file" class="form-control form-control-sm " id="amount5" wire:model="photo" />
</div>
</div>
<div class="col-md-3 mt-4 mb-2 pt-1">
<button type="button" class="btn btn-sm btn-success btn-icon" wire:click="mission_description"> <span>Continue</span> </button>
</div>
</div>
<div wire:loading wire:target="photo">Uploading...</div>
#if($photo)
<img src="{{ $isUploaded ? $photo->temporaryUrl() : asset('public/'.$photo) }}" width="150" height="150">
#endif
ScreenShot:
Front View Screenshot
It is a temp file and Livewire can't serialize it on subsequent requests. You have to store the file
https://laravel-livewire.com/screencasts/s5-intro
Do you by any chance have multiple components for each step?
I have a form in razor page with 2 button.
<form method="post" class="form-group ">
<div class="form-group col-md-3">
<div class="input-group">
<input asp-for="DoctorViewModel.NationalCode" class="form-control" type="text" maxlength="10" required onblur="">
<div class="input-group-append">
<button class="btn btn-outline-primary " asp-page-handler="GetInfo" >search</button>
</div>
</div>
<span asp-validation-for="DoctorViewModel.NationalCode"></span>
</div>
.
.
<div class="form-group col-md-2">
<label asp-for="DoctorViewModel.Name" class="col-form-label"></label>
<input asp-for="DoctorViewModel.Name" class="form-control" type="text" maxlength="50" required>
<span asp-validation-for="DoctorViewModel.Name"></span>
</div>
.
.
.
.
<input type="submit" class="btn btn-success" value="Save"/>
</form>
and when click on search button i wants to load form info from a handler.
but when click this button get validation error.
How i can disable validation check for only search button. in asp.net form i used CauseValidation=false.
To skip validation while still using a submit-button, you can try to add the attribute formnovalidate :
<button class="btn btn-outline-primary" formnovalidate asp-page-handler="GetInfo">search</button>
The default type for a button is to submit the form it is contained within in most browsers.
You simply need to add a type of button and this should stop the submit and therefore the automatic validation will not trigger.
<button class="btn btn-outline-primary " type="button" asp-page-handler="GetInfo" >search</button>
I have an issue.
I have dynamic form as per user wants.
Everything is going good except i cannot retrieve old values when validation occurs. What i want is validation message with old input values. The problem is due to dynamic form .
Here is my code :
<div class="col-sm-5">
<input class="form-control" type="text" name="key_name[]"
placeholder="Size" value="{{ old('key_name[]') }}">
</div>
<div class="col-sm-5">
<input class="form-control" type="text" name="key_value[]"
placeholder="Price" value="{{ old('key_value[]') }}">
</div>
<button type="button" class="btn btn-danger remove-field"><i
class="ion-trash-a"></i> Delete
</button>
#if ($errors->has('key_name[]'))
<div class="error-add-size-message">
<span class="help-block">
<strong> * {{ $errors->first('key_name[]') }}</strong>
</span>
</div>
#endif
Thanks in advance.
You can count form inputs in your controller and flash this count in the session.
$count = count($request->input("key_name"));
session()->flash("form_count",$count);
Context
I'm building a list a results where each result can be edited by users.
Approach
Currently I'm repeating the visible <span> tag that displays a result as well as the hidden <input> tag used to edit this same result. See the last <td> :
<tr ng-repeat="entry in paginateDict | orderBy:predicate:reverse" class="form-inline" role="form">
<!-- Edit buttons -->
<td>
<div class="radio">
<label ng-hide="editMode" title="edit">
<input class="sr-only" type="radio" name="edit"
data-ng-click="editMode=true">
<span tooltip="edit" class="fa fa-pencil fa-lg"></span>
</label>
<label ng-show="editMode" title="save">
<input class="sr-only" type="radio" name="edit"
ng-model="editMode" ng-click="submitEntry(true)">
<span tooltip="save" class="fa fa-save fa-lg text-primary"></span>
</label>
<label ng-show="editMode" title="cancel">
<input class="sr-only" type="radio" name="edit"
ng-model="editMode" ng-click="submitEntry(false)">
<span tooltip="undo" class="fa fa-times fa-lg text-danger"></span>
</label>
</div>
</td>
<!-- Content -->
<td ng-show="pyn" lang="cmn-py" data-id="{{entry.cid}}">
<span ng-hide="editMode">{{entry.pyn | pinyin }}</span>
<input type="text" placeholder="{{entry.pyn}}" ng-model="entry.pyn" ng-show="editMode" class="form-control">
</td>
</tr>
Each line as 5 editable columns and each column as two binding (on <span> and <input>).
Question
In order to improve page performance, by reducing the number of binding, is there an Angular way to dynamically create and attach the <input> to a row when the edit radio button is click ?
You can do that using ngIf directive instead of ng-show
The ngIf directive removes or recreates a portion of the DOM tree based on an {expression}.
<td ng-show="pyn" lang="cmn-py" data-id="{{entry.cid}}">
<span ng-hide="editMode">{{entry.pyn | pinyin }}</span>
<input type="text" placeholder="{{entry.pyn}}" ng-model="entry.pyn" ng-if="editMode" class="form-control">
</td>