Develop Reference

Adjusting dynamic input fields when changing the type of the input field

I have a little challenge when testing a website. Just wanted to see if you folks have any suggestions on this. The story behind this is that I need to mask the input fields for the screenshots when the test has been executed as we are sharing the data with other teams. Before the script I am running JS with 'document***.type="password";', but when script starts to type, then input type is changed back to the type of text. Also, class changes from class="is-invalid" to class="is-focused is-invalid" when it's active. Also, I could of course change the type after I have typed the value, but even tho when I click the next field, the class changes. When I have filled the first input field it checks the data against the server and the class is of course changed.
I have an input field when inactive:
<input ref="input" value="input field" id="id-for-unified-text-input--14fe" name="unified-text-input-14fe" type="text" autocomplete="off" spellcheck="false" placeholder="ABC123" class="is-invalid">
And the input field when active"
<input ref="input" value="input field" id="id-for-unified-text-input--14fe" name="unified-text-input-14fe" type="text" autocomplete="off" spellcheck="false" placeholder="ABC123" class="is-focused is-invalid">
Any suggestions from a fellow testers, how could I fix this? Thanks a lot in advance!

As pretty much evident from the HTML the <input> field whenever recieves the focus_ the classname is-focused added.
This addition of classname is pretty much controled through the attributes, presumably the css_properties of the parent elements.
As as conclusion, it would be difficult to mask the password field characters from the clientside and have to be controled from the Application Server side.

Passing hidden form inputs with Laravel Livewire

I am running into an issue where I am using JavaScript to populate two hidden input fields as a user moves around a cropping tool on an image. The hidden inputs are being populated with the pixels where the image would be cropped. My initial understanding is that using wire.model won't work with hidden input fields that are updated by JavaScript as it will always return null when I submit the form.
<input type="hidden" id="formWidth" name="width" value="width" wire:model.defer="width">
<input type="hidden" id="formHeight" name="height" value="height" wire:model.defer="height">
The value changes as a user moves the cropping tool around the image so once they are ready to submit it would look like:
<input type="hidden" id="formWidth" name="width" value="40px" wire:model.defer="width">
<input type="hidden" id="formHeight" name="height" value="20px" wire:model.defer="height">
I am new to Livewire and I was hoping someone could push me in the direction of how I should be handling hidden inputs or if there is a way to have Livewire read a JavaScript variable and I would no longer update it in the input, but instead a new variable.

I ended up find my solution on Lirewire's forum and thought I would share if anyone else runs into the same issue as me:
After you set the value, you can do something like:
var element = document.getElementById('description');
element.dispatchEvent(new Event('input'));
This should trigger the input event on the field and cause livewire to communicate to your backend.

Angular 2 2 way data binding on 2 inputs not working

Hello i have this code:
<input type="radio" value="{{commencementDate.value}}" id="bankCommencementDateSelect" formControlName="bankCommencementDate">
<input #commencementDate id="bankCommencementDateInput" formControlName="bankCommencementDateInput" type="date" format="DD-MM-YYYY" min="{{ today | date: 'y-MM-dd' }}"/>
The value of the date input is being put into the radio input however when i save the form the value is not saving and is causing a error on the required validation on the radio input.
What i want to happen is whatever value is in the date input is set to the value of the radio button so when its saved it works but i ave tryed a few other ways and nothing seems to be working.
Any help would be amazing thanks!

Since you have a formControlName, the correct way to get the value is like this :
<input type="radio" [value]="myForm.get('bankCommencementDateInput').value" id="bankCommencementDateSelect" formControlName="bankCommencementDate">

The best way to set value in Angular reactive from is from a class component using setValue or patchValue.
You can write a function which set value(using patchValue) from a class component on keyup event.

Using conditional operators in v-model?

I have a vue component that shows a form populated with items from a selected item to edit. Now I don't want to have to use a second form for creating a new item. At the moment I auto populate and update the item with v-model which obviously updates the object. Am I not able to use conditional operators in this like so?
<form #submit.prevent>
<div class="field">
<label class="label">Job Title</label>
<p class="control">
<input type="text" class="input" placeholder="Job title" v-model="experiences[editIndex].title ? experiences[editIndex].title : ''" />
</p>
</div>
</form>

You can use conditional operators with v-model, but you can't give v-model a string like you're attempting in your example.
I wouldn't use the same form for editing and creating (might be preference). I would make the form its own component and then make two additional form components for editing and creating.
However, if you really want to handle the logic in each input's v-model directive, you would need to give it a variable in the last part of the ternary operator. Something like this:
v-model="experiences[i].title ? experiences[i].title : newExperience.title"

If you use eslint-plugin-vue it will complain about ternary in v-model.
ESLint: 'v-model' directives require the attribute value which is
valid as LHS. (vue/valid-v-model)
So I'd rather explicitly use a pair of :value and #input props.
Like that:
<input
type="text"
class="input"
placeholder="Job title"
:value="experiences[editIndex].title ? experiences[editIndex].title : ''"
#input="experiences[editIndex].title = $event.target.value"
/>
Also, you can use some function for #input, which will check property existence and add it if necessary.

Submitting the value of a disabled input field

I want to disable an input field, but when I submit the form it should still pass the value.
Use case: I am trying to get latitude and longitude from Google Maps and wanna display it, but I don't want the user to edit it.
Is this possible?

I wanna Disable an Input Field on a
form and when i submit the form the
values from the disabled form is not
submitted.
Use Case: i am trying to get Lat Lng
from Google Map and wanna Display it..
but dont want the user to edit it.
You can use the readonly property in your input field
<input type="text" readonly="readonly" />

I know this is old but I just ran into this problem and none of the answers are suitable. nickf's solution works but it requires javascript. The best way is to disable the field and still pass the value is to use a hidden input field to pass the value to the form. For example,
<input type="text" value="22.2222" disabled="disabled" />
<input type="hidden" name="lat" value="22.2222" />
This way the value is passed but the user sees the greyed out field. The readonly attribute does not gray it out.

you can also use the Readonly attribute: the input is not gonna be grayed but it won't be editable
<input type="text" name="lat" value="22.2222" readonly="readonly" />

Input elements have a property called disabled. When the form submits, just run some code like this:
var myInput = document.getElementById('myInput');
myInput.disabled = true;