I am trying to save multiple checkbox values, and its value attributes contain special characters, such as "ç," "ã," and so on. But when I get into my controller and return the $request object, I see that the special characters are not being formatted in utf-8. How can I solve this, please?
HTML
<div class="form-check">
<input class="form-check-input" name="servicos[]" type="checkbox"
value="Substituição de piso nos banheiros" id="servicos1">
<label class="form-check-label" for="flexRadioDefault1">
Substituição de piso nos banheiros
</label>
</div>
<div class="form-check">
<input class="form-check-input" name="servicos[]" type="checkbox"
value="Instalação de piso na sala e dormitórios" id="servicos2">
<label class="form-check-label" for="flexRadioDefault1">
Instalação de piso na sala e dormitórios
</label>
</div>
<div class="form-check">
<input class="form-check-input" name="servicos[]" type="checkbox"
value="Substituição de piso na cozinha" id="servicos3">
<label class="form-check-label" for="flexRadioDefault1">
Substituição de piso na cozinha
</label>
</div>
Controller
return $request->servicos;
Related
Is there a way to validate the numerical value of input field using template driven forms in Angular 11?
To give a bit of context, I'm building a memory card game using Angular 11 and I'd like to make sure that the player can't select a maxFlipCount that is inferior to the number of cards. I have been struggling to make this work using the min attribute on an input tag. Maybe there's another that I don't know of that doesn't use the min attribute.
How could I achieve this?
I'm trying to apply this validation to the last input tag, before the submit button in my template code. This is what I have so far:
<form #gameOptionsForm="ngForm" (ngSubmit)="startGame()" novalidate>
<!-- mode de jeu -->
<div class="field">
<label class="label">Mode de jeu</label>
<div class="control">
<div class="select" [class.is-danger]="
gameMode.invalid && (gameMode.dirty || gameMode.touched)
">
<select name="gameMode" [(ngModel)]="optionsForm.gameMode" #gameMode="ngModel" required>
<option value="1">1 joueur</option>
<option value="2">2 joueurs</option>
</select>
</div>
</div>
<p class="help is-danger" *ngIf="gameMode.invalid && (gameMode.dirty || gameMode.touched)">
Vous devez choisir un mode jeu
</p>
</div>
<!-- nom du premier joueur -->
<div class="field" *ngIf="optionsForm.gameMode == 1 || optionsForm.gameMode == 2">
<label class="label">Nom du joueur 1</label>
<div class="control">
<input [class.is-danger]="
player1.invalid && (player1.dirty || player1.touched)
" class="input" type="text" name="player1" placeholder="Joueur 1" #player1="ngModel" [(ngModel)]="optionsForm.player1" required />
</div>
<p class="help is-danger" *ngIf="player1.invalid && (player1.dirty || player1.touched)">
Veuillez entrer un nom pour le joueur 1
</p>
</div>
<!-- nom du deuxieme joueur -->
<div class="field" *ngIf="optionsForm.gameMode == 2">
<label class="label">Nom du joueur 2</label>
<div class="control">
<input [class.is-danger]="
player2.invalid && (player2.dirty || player2.touched)
" class="input" type="text" name="player2" placeholder="Joueur 2" #player2="ngModel" [(ngModel)]="optionsForm.player2" required />
</div>
<p class="help is-danger" *ngIf="player2.invalid && (player2.dirty || player2.touched)">
Veuillez entrer un nom pour le joueur 2
</p>
</div>
<!-- taille de la grille -->
<div class="field">
<label class="label">Nombre de cartes</label>
<div class="control">
<div class="select" [class.is-danger]="
gridSize.invalid && (gridSize.dirty || gridSize.touched)
">
<select name="gridSize" [(ngModel)]="optionsForm.gridSize" #gridSize="ngModel" required>
<option value="4">4</option>
<option value="16">16</option>
<option value="36">36</option>
</select>
</div>
</div>
<p class="help is-danger" *ngIf="gridSize.invalid && (gridSize.dirty || gridSize.touched)">
Vous devez choisir un nombre de cartes
</p>
</div>
<!-- nombre maximal de coups -->
<div class="field">
<label class="label">Nombre maximal de coups</label>
<div class="control">
<input [class.is-danger]="
maxFlipCount.invalid && (maxFlipCount.dirty || maxFlipCount.touched)
" class="input" type="number" name="maxFlipCount" #maxFlipCount="ngModel" [(ngModel)]="optionsForm.maxFlipCount" required min="{{ optionsForm.gridSize }}" />
</div>
<p class="help is-danger" *ngIf="
maxFlipCount.invalid &&
(maxFlipCount.dirty || maxFlipCount.touched) &&
maxFlipCount.errors.required
">
Veuillez entrer un nombre maximal de coups
</p>
<p class="help is-danger" *ngIf="maxFlipCount.errors?.min">
Veuillez entrer un nombre supérieur ou égal à {{ optionsForm.gridSize }}
</p>
</div>
<button type="submit" [disabled]="!gameOptionsForm.form.valid">
Commencer
</button>
</form>
The min attribute does actually do it's job when I use the little arrows (automatically put there by the browser) on the side to increase/decrease the value, however the problem is when I type a value in manually, the field value can be whatever I want and it will not appear as being invalid.
Thank you for reading through this and suggesting any ideas.
I ended up finding the answer to my question. So, I used a custom directive to check that the value of the field was what I wanted.
This article explains it quite well: https://www.digitalocean.com/community/tutorials/angular-custom-validation
Im using radio buttons, and I dont want that the user can select multiple radio buttons. But its not working, the user can select both radio buttons everytime.
Ja = Yes, nee = No.
I want to make the user decide between either Yes or no. Nothing else.
<p>Vraag 13: Houdt u van wijnproeferijen?</p>
<input type="radio" id="vraag13ja" value="ja"> Ja
<input type="radio" id="vraag13nee" value="nee"> Nee
<p>Vraag 14: Houdt u van restaurants?</p>
<input type="radio" id="vraag14ja" value="ja"> Ja
<input type="radio" id="vraag14nee" value="nee"> Nee
<p>Vraag 15: Houdt u van nieuwe mensen ontmoeten?</p>
<input type="radio" id="vraag15ja" value="ja"> Ja
<input type="radio" id="vraag15nee" value="nee"> Nee
<p>Vraag 16: Houdt u van cafes?</p>
<input type="radio" id="vraag16ja" value="ja"> Ja
<input type="radio" id="vraag16nee" value="nee"> Nee
<p>Vraag 17: Houdt u van een feestje?</p>
<input type="radio" id="vraag17ja" value="ja"> Ja
<input type="radio" id="vraag17nee" value="nee"> Nee
<p>Vraag 18: Houdt u van nieuwe culturen ontdekken?</p>
<input type="radio" id="vraag18ja" value="ja"> Ja
<input type="radio" id="vraag18nee" value="nee"> Nee
<p>Vraag 19: Houdt u van bergwandelen?</p>
<input type="radio" id="vraag19ja" value="ja"> Ja
<input type="radio" id="vraag19nee" value="nee"> Nee
<p>Vraag 20: Houdt u van sportwedstrijden?</p>
<input type="radio" id="vraag20ja" value="ja"> Ja
<input type="radio" id="vraag20nee" value="nee"> Nee
<p>Vraag 21: Houdt u van oude gebouwen bezoeken?</p>
<input type="radio" id="vraag21ja" value="ja"> Ja
<input type="radio" id="vraag21nee" value="nee"> Nee
<p>Vraag 22: Houdt u ervan om nationale monumenten te bezoeken?</p>
<input type="radio" id="vraag22ja" value="ja"> Ja
<input type="radio" id="vraag22nee" value="nee"> Nee
<p>Vraag 23: Houdt u van watersport?</p>
<input type="radio" id="vraag23ja" value="ja"> Ja
<input type="radio" id="vraag23nee" value="nee"> Nee
<p>Vraag 24: Houdt u van sporten?</p>
<input type="radio" id="vraag24ja" value="ja"> Ja
<input type="radio" id="vraag24nee" value="nee"> Nee
</div>
From the w3schools.com reference of radio buttons:
Note: The radio group must have share the same name (the value of the
name attribute) to be treated as a group. Once the radio group is
created, selecting any radio button in that group automatically
deselects any other selected radio button in the same group. You can
have as many radio groups on a page as you want, as long as each group
has its own name.
Yo might want to use the label tag as well. For example:
<p>Vraag 13: Houdt u van wijnproeferijen?</p>
<input type="radio" name="first" id="vraag13ja" value="ja">
<label for="vraag13ja">Ja</label>
<input type="radio" name="first" id="vraag13nee" value="nee">
<label for="vraag13nee">Nee</label><br>
<p>Vraag 14: Houdt u van restaurants?</p>
<input type="radio" name="second" id="vraag14ja" value="ja">
<label for="vraag14ja">Ja</label>
<input type="radio" name="second" id="vraag14nee" value="nee"> Nee
<label for="vraag14nee">Nee</label>
...and so on
I have a for loop that displays the data into multiple radio-buttons (bootstrap):
<div class="radio" >
<label v-for="(choice, index) in choices" v-if="choice.question_id == question.id" :key="choice.id">
<input type="radio" name="optradio" id="choice.id"> [[choice.content]]
</label>
</div>
As you can see, I wanted to use the choice.id for id="..." in each button, technically it should look something like this:
<input type="radio" name="optradio" id="1"> Choice1
<input type="radio" name="optradio" id="2"> Choice2
<input type="radio" name="optradio" id="3"> Choice3
But it renders it with the actual string choice.id:
<input type="radio" name="optradio" id="choice.id"> Choice1
<input type="radio" name="optradio" id="choice.id"> Choice2
<input type="radio" name="optradio" id="choice.id"> Choice3
Forgive my naiveness. Any help/advices? Thanks a lot!
It renders with choice-id string because you add plain string as the id value, not a variable value
You can use v-bind directive or the shorthand for v-bind -> :id
<div class="radio" >
<label v-for="(choice, index) in choices" v-if="choice.question_id == question.id" :key="choice.id">
<input type="radio" name="optradio" v-bind:id="choice.id"> [[choice.content]]
</label>
</div>
using shorthand <input type="radio" name="optradio" :id="choice.id">
To answer your questions in the comments.
You can ' separate 'the radios by adding them in a ' group ' using the name attribute. Radios with the same name attribute are in one group. Changing their values won't affect other radios in other groups ( with different name attributes ). See example below.
Or you can use vue v-model to separate and get the selected options.
new Vue({
el: "#radio-app",
data: {
question1: '',
question2: ''
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://github.com/vuejs/vue-devtools"></script>
Question1:
<input type="radio" name="question1" id="q1choice1" value="choice1"/>
<input type="radio" name="question1" id="q1choice2" value="choice2"/>
Question2:
<input type="radio" name="question2" id="q2choice1" value="choice1"/>
<input type="radio" name="question2" id="q2choice2" value="choice2"/>
<hr />
<h2> Or with VUE v-model </h2>
<div id="radio-app">
Question1:
<input type="radio" id="q1choice1vue" value="choice1" v-model="question1">
<input type="radio" id="q1choice2vue" value="choice2" v-model="question1">
Question2:
<input type="radio" id="q2choice1vue" value="choice1" v-model="question2">
<input type="radio" id="q2choice2vue" value="choice2" v-model="question2">
<div>Question 1 selected answer: {{ question1 }}</div>
<div>Question 2 selected answer: {{ question2 }}</div>
</div>
Check more here
VUE template syntax
v-bind directive
Use: v-bind:id="choice.id" or the short version :id="choice.id"
How can I save the value of checked checkbox as 1 and unchecked as 0, I'm using boolean on my model.
<div class="form-check form-check-inline">
<input name="vat" class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1" [(ngModel)]="VatExempt">
<label class="form-check-label" for="inlineCheckbox1">VAT EXEMPT </label> <div class="row pl-4 font-italic">(Check if PEZA member)</div>
</div>
You can use a getter (other variable)
get VatExemptInt(){
return VatExempt?1:0
}
By the way, it's a common use camel-case to name the variables (better vatExempt, than VatExempt)
I´d like to autofill receipt data. If my receipt is not null it should pick the right gender to a radio button with thymeleaf. There are no errors if the receipt is not null, but if receipt is null the errors are thrown
<div class="form-group">
<div id="genderReceipt">
<label for="genderMaleReceipt" class="radio-inline">
<input type="radio" name="genderReceipt" id="genderMaleReceipt" value="MALE" th:field="*{receipt.gender}"/>
Herr
</label>
<label for="genderFemaleReceipt" class="radio-inline">
<input type="radio" name="genderReceipt" id="genderFemaleReceipt" value="FEMALE" th:field="*{receipt.gender}"/>
Frau
</label>
</div>
<label for="genderReceipt" class="error" style="display: none;"> Bitte gib eine Anrede an.</label>
</div>
The result should be like: if receipt == null both are unchecked... if receipt != null the right gender is checked
error log says:
java.lang.IllegalStateException: Neither BindingResult nor plain target object for bean name 'receipt' available as request attribute
My Solution for this problem is to duplicate the code and insert th:if statements like here in the example
<div th:if="${receipt} == null">
<label for="genderFemaleReceipt" class="radio-inline">
<input type="radio" name="genderReceipt" id="genderMaleReceipt" value="MALE" />
Herr
</label>
<label for="genderFemaleReceipt" class="radio-inline">
<input type="radio" name="genderReceipt" id="genderFemaleReceipt" value="FEMALE" />
Frau
</label>
</div>
<div th:if="${receipt} != null">
<label for="genderFemaleReceipt" class="radio-inline">
<input type="radio" name="genderReceipt" id="genderMaleReceipt" value="MALE" th:field="*{receipt.gender}"/>
Herr
</label>
<label for="genderFemaleReceipt" class="radio-inline">
<input type="radio" name="genderReceipt" id="genderFemaleReceipt" value="FEMALE" th:field="*{receipt.gender}"/>
Frau
</label>
</div>
I know thats not best practice ;( but i didn´t know a other way to do it.