i have created a typeahead with some names and i want to remove all already used name.
TS:
search = (text$: Observable<string>) =>
text$.pipe(
debounceTime(200),
distinctUntilChanged(),
filter(term => term.length >=1),
map(term => this.coathangers.filter(coathangers => new RegExp(term, 'mi').test(coathangers.name)).slice(0, 20)),
)
HTML:
<label class="control-label" for="typeahead-basic">Kleiderbügel:
<input id="typeahead-basic" type="text" class="form-control" style="text-transform: capitalize"
[(ngModel)]="coathanger" [ngModelOptions]="{standalone: true}" [ngbTypeahead]="search"
[inputFormatter]="formatter" [resultFormatter]="formatter"
[editable]='false' class="field"/>
</label>
i want to remove or disabled all names that have already a borrower. with something like that if(user.hanher.name=== coathangers.name) then disavled or whatever. but i don't how i can do it or how i can include a if-condition in search =... or direct in the html
Do someone have any idea?
Related
I'm trying to set up react-fook-form to validate my forms, but when I use the register function on a text input (in my case the username input), this input is no longer editable, I can't type anything inside.
const {register, handleSubmit, formState: { errors }} = useForm();
const [username, setUsername] = useState('');
.....
<form onSubmit={handleSubmit(onSubmit)}>
<label htmlFor="username">Username : </label>
<input type="text" value={username}
onChange={e => setUsername(e.target.value)}
{...register('username', { required: 'Please, type in your username' })}
/>
{errors.username && <span style={{color: 'red'}}><br/>{errors.username.message}</span>}
<br/>
<label htmlFor="password">Password : </label>
<input type="password" value={password} onChange={e => setPassword(e.target.value)}/>
<br/>
<button type="submit">Login</button>
</form>
Ok I finally found the solution myself.
Since the version 7 of react-hook-form library, we have to place "onChange" inside the register function like so :
<input type="text" value={username} {...register('username', {
required: 'Please, type in your username',
onChange: e => setUsername(e.target.value)
})}/>
I am trying to add oninvalid attribute in HTML element under React js code. (using react hooks not class based)
const openEndedAnswer = answer => {
return (<>
<input type="text" className="form-control"
required="required"
oninvalid="this.setCustomValidity('Enter User Name Here')"
oninput="this.setCustomValidity('')"
maxLength="255"
id={`answer_${question.id}`}
name={`answer_${question.id}`}
onChange={e => updatePostForm(e)}
pattern=".*[^ ].*"
title=" No white spaces"
/>
</>)
}
But it never renders in the browser. all other attributes can be seen in F12 source view.
The attribute names should onInvalid instead of oninvalid and onInput instead of oninput. Additionally, you need to call the setCustomValidity function on the input field as follow (because the input field is the target of the event):
onInvalid={e => e.target.setCustomValidity('Enter User Name Here')}
onInput={e => e.target.setCustomValidity('')}
If you are using React with javascript this should work:
onInvalid={e => e.target.setCustomValidity('Your custom message')}
onInput={e => e.target.setCustomValidity('')}
But if you are working with React with typescript you also need to add this:
onInvalid={e => (e.target as HTMLInputElement).setCustomValidity('Enter User Name Here')}
onInput={e => (e.target as HTMLInputElement).setCustomValidity('')}
Try onInvalid instead:
export default function App() {
return (
<form>
Name:{" "}
<input
type="text"
onInvalid={() => console.log("working!")}
name="fname"
required
/>
<input type="submit" value="Submit" />
</form>
);
}
I want to create a feature to filter data. I use the checkbox to do this.
But I want when the checkbox is selected and then the user submits to filter the data, the previously selected checkbox remains selected.
i tried to do it like this but it didn't work
<input type="checkbox" id="ac" name="ac" value="ac" #if(old('ac')) checked #endif>
my form method to submit this is GET.
old() helper function is only for saved flash session data. Without saved it on flash session you can not retrieve it. An example to save flash data for old() function
request()->flashOnly(['ac']);
or
return redirect('form')->withInput();
If you use GET method and no redirection after submit you can do it using request() helper function. Like this:
<input type="checkbox" id="ac" name="ac" value="ac" #if(request()->ac) checked #endif>
For the submitting form using POST method with multiple checkboxes,
#foreach ($categories as $index => $category)
<div class="form-check form-check-inline">
<input type="checkbox" name="type[]"
value="{{ $category->id }}"
{{ (is_array(old('type')) && in_array($index + 1, old('type'))) ? 'checked' : '' }}
class="form-check-input #error('type') is-invalid #enderror"
id="type_{{$category->id}}">
<label class="form-check-label" for="type_{{$category->id}}">
{{ $category->name }}
</label>
</div>
#endforeach
This worked form me:
<input name="mail" type="hidden" value="0" >
<input name="mail" type="checkbox" value="1"#if(old('mail')) checked #endif>
controller:
$request->validate([
'mail' => 'required',
]);
Contact::create($request->all());
I recently start a new project using cakephp 3. I have to generate a particular form for input box, as I am using AdminLTE V2.
Admin LTE required HTML is as following
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input class="form-control" id="inputEmail3" placeholder="Email" type="email">
</div>
</div>
I have generate it as following
<div class="form-group input text required">
<label class="col-sm-3 control-label" for="full-name">Full Name</label>
<input type="text" name="full_name" class="form-control" required="required" maxlength="100" id="full-name">
</div>
I need to generate the inner <div>. How I can do this? Please help.
For this CakePhp provide Customizing the Templates FormHelper. Like many helpers in CakePHP, FormHelper uses string templates to format the HTML it creates. While the default templates are intended to be a reasonable set of defaults. You may need to customize the templates to suit your application.
Below i have customize the input field according to AdminLTE.
echo $this->Form->input('email', [
'label' => ['text' => 'Email','class' => 'col-sm-2'],
'templates' => [
'label' => '<label{{attrs}}>{{text}}</label>',
'input' => '<div class="col-sm-10"><input type="{{type}}" name="{{name}}" {{attrs}}/></div>',
'inputContainer' => '<div class="form-group {{type}}{{required}}">{{content}}</div>',
'inputContainerError' => '<div class="form-group {{type}}{{required}} has-error">{{content}}{{error}}</div>',
],
]);
The output of this in AdminLTE theme is following.
<div class="form-group text">
<label class="col-sm-2" for="email">Email</label>
<div class="col-sm-10">
<input type="text" name="email" placeholder="Email" id="first-name">
</div>
</div>
Use the friends of cake bootstrap plugin available at https://github.com/friendsofcake/bootstrap-ui
It already includes full support for bootstrap based themes.
You can just use plain html, as #Manohar said. But if you really prefer cakephp's syntax, I use this type of syntax in my projects (same theme):
<div class="form-group">
<?php echo $this->Form->label('descricao', 'Descrição'); ?>
<div class="col-sm-10">
<?php echo $this->Form->input('descricao', ['label' => false, 'class' => 'form-control', 'placeholder' => "myPlaceHolder"]); ?>
</div>
</div>
You might need some additional parameters to do exactly what is written in the pure html version of your code. You can check out other options for cakephp's forms in it's documentation: http://book.cakephp.org/3.0/en/views/helpers/form.html#creating-form-inputs
I want to show 2 radio buttons used to select the gender of a student. When I try to set a variable using the CGI Perl module to produce html code for these radio buttons, only the radio selection text is showing, not the buttons:
$cInput_form .= $q->div({-class => 'control-group'},
$q->label({-class => 'control-label', -for => 'gender'}, "Gender:"),
$q->div({class => 'controls'},
$q->span({class => 'span12'},
$q->label({-class => 'blue'},
$q->radio_group({-id => 'gender',name => 'gender', -values => ['M','F'], -labels => \%labels, -default => $cGender, 'true'}), $q->span({-class => 'lbl'})))));
When I use the "Insepect element" tool in my web browser the html I see is:
<div class="control-group">
<label class="control-label" for="gender">Gender:</label>
<div class="controls">
<span class="span12">
<label class="blue">
<label>
<input type="radio" name="gender" value="M" checked="checked" id="gender" true="">
Male
</label>
<label>
<input type="radio" name="gender" value="F" id="gender" true="">
Female
</label>
<span class="lbl"></span>
</label>
</span>
</div>
</div>
I think the problem is that <span class = 'lbl'> is not in the right place, but I don't know where else it should be. Please help me.
I think the issue might be that you are grouping the radio_group within unnecessary label groups. This page shows code similar to your situation for wanting to create a gender selection radio button group.
Try changing your code to(reformatted to make it a little more readable):
$cInput_form .= $q->div({-class => 'control-group'},
$q->label({-class => 'control-label',
-for => 'gender'}, Gender:"),
$q->radio_group({-id => 'gender',
name => 'gender',
-values => ['M','F'],
-labels => \%labels,
-default => $cGender,
'true'}),
);
This is untested but I think gets across the point, just be careful when grouping 1 section inside another. Hope it helps!