I have this working, but I would like to find a way to handle any level of nesting with v-model or something re-usable rather than creating companion functions every time.
<select :value="task.settings && task.settings.task_type ? task.settings.task_type : ''"
#input="e => setSetting('task_type', e.target.value)">
<option value="">Select Task Type</option>
<option>Habit</option>
<option>Appointment</option>
<option>Recurring</option>
<option>Meeting</option>
</select>
And in methods:
setSetting(key, value) {
this.task.settings[key] = value
},
Related
Seeing this warning in React
Warning: Use the defaultValue or value props on instead of setting selected on .
What does it implies?
It's basically a warning that encourages you to change your code from doing <option selected> to doing <select defaultValue="theValue"> or using a controlled select.
It's probably because React wants to keep consistency between the Form components.
Edit: you can probably implement it this way using useState hook and a controlled select:
const [value, setValue] = useState("defaultValue");
...
<select value={value} onChange={(e) => {setValue(e.target.value)}}>
<option value="defaultValue"> Default </option>
<option value="otherValue"> Other </option>
</select>
I want to display some options in a select list based on data in an object. For example if the data property is 0 i want to display a select option as 0 , with option to change to 1, vice versa. However in the html, no option value is played in the field. What am i doing wrong?
Here is my code:
<div class="form-group">
<label for="isVisible" class="label">Set Visibility</label>
<select *ngIf="category.isVisible === 0" class="form-select" id="isVisible" formControlName="isVisible">
<option selected value="0">Hidden</option>
<option value="1">Visible</option>
</select>
<select *ngIf="category.isVisible === 1" class="form-select" id="isVisible" formControlName="isVisible">
<option selected value="1">Visible</option>
<option value="0">Hidden</option>
</select>
</div>
Here is an example of an object i am passing to the html/view:
{
"id": 10023,
"product": "nike tiempo trainers",
"price": 55.00,
"isVisible": 1
}
Not suggest doing your approach manually, but would suggest that just provide the category.isVisible value to FormControl. The reactive form will handle it.
<select class="form-select" id="isVisible" formControlName="isVisible">
<option value="0">Hidden</option>
<option value="1">Visible</option>
</select>
Solution 1: Patch value to FormControl.
Note: This approach is not suggested if the category object is got from API.
this.form = this.fb.group({
isVisible: [this.category.isVisible],
});
Solution 2: Patch value to FormControl.
this.form.controls.isVisible.patchValue(this.category.isVisible);
Solution 3: Patch category object to FormGroup.
Note: Do consider this approach when you want to bind the whole object to the form group instead of binding each property to form control one by one.
this.form.patchValue(this.category);
Sample StackBlitz Demo
I am using laravel to develop an app that require an array of select option
My code
<select name="test_id[]" class="form-control select-test-{{$idselect}}"
id="select-{{Illuminate\Support\Str::random(10)}}">
<option value="">Select Patient Test</option>
#foreach ($tests as $item)
<option value="{{$item->id}}">{{$item->name}}</option>
#endforeach
</select>
Laravel validation code
$request->validate([
'test_id' => 'required:array'
], [
'test_id.required' => "Test is required"
]);
it goes through even when no selected
Output when not selected
Well the only thing you are missing is the multiple attribute in your select element.
<select multiple name="test_id[]" class="form-control select-test-{{$idselect}}" id="select-{{Illuminate\Support\Str::random(10)}}">
values are integer I guess, so you have to set validation for each index using * like this:
'test_id.*' : 'required|integer'
p.s: Asterisk symbol (*) is used to check values in the array, not the array itself.
I have an app angular that can be translate both in french and english. I'm using angular translate to do that. The problem is: I receive an array of object from an API and in those object, I have a property bookConditionEn and a property bookConditionFr and other like ids.
In a select input , I want to display bookCondition depending by the current language.
In the controller, I can get the current language with the $translate service
vm.getCurrentLanguage = function() {
return $translate.use();
}
So, I wonder if in the view I could use a condition in the ng-option.
<select
ng-options="bookCondition.BookCondition for bookCondition in bookCtrl.bookConditions"
ng-model="bookCtrl.bookConditions"
name="Condition" class="form-control"
></select>
You can use conditionals to show/hide options by changing the way you are creating the <select>:
<select ng-options=ng-model="bookCtrl.bookConditions" name="Condition" class="form-control">
<option
ng-repeat="bookCondition.BookCondition for bookCondition in bookCtrl.bookConditions"
ng-if="vm.getCurrentLanguage==bookCondition.language"
>
</select>
I didn't quite understand how you have your JSON set up so I am assuming you have a property that contains the language (bookCondition.language). You can compare this against the user's currently-selected language which is returned by your vm.getCurrentLanguage. By the way, I suggest changing that from a function to just be a variable like this:
vm.currentLanguage = $translate.use();
This should be all you need to do to specify options in a conditional manner.
It worked your way
<select ng-model="bookCtrl.bookCondition" name="Condition" class="form-control">
<option ng-if="bookCtrl.getCurrentLanguage() === 'en'" ng-repeat="bookCondition in bookCtrl.bookConditions" value="{{bookCondition}}">{{bookCondition.BookCondition}}</option>
<option ng-if="bookCtrl.getCurrentLanguage() === 'fr'" ng-repeat="bookCondition in bookCtrl.bookConditions" value="{{bookCondition}}">{{bookCondition.BookConditionFr}}</option>
</select>
I've read about both react forms and react two way binding helpers.
But I can't find any saying about how to implement two-way bindings with select elements.
I've tried like:
render: {
var selectValueLink = {
value: this.state.selectedValue,
requestChange: this.handleChange
};
return (
<select valueLink={selectValueLink}>
<option value={'A'}>OPTION A</option>
<option value={'B'}>OPTION B</option>
<option value={'C'}>OPTION C</option>
</select>
);
}
but this.handleChange doesn't get fired when I manually change selected options via mouse clicks.
Is there any way to use React's valueLink nicely with select elements?
Here is an example with select element and everything seems to be working http://plnkr.co/edit/3ueB63nxJ4wwV8rSIusr.