Develop Reference

how can I validate with vuejs fields that are prepopulated from database?

I want to validate the inputs from a form in vuejs, and when the data is pre-populated I want the inputs to convert to readonly.
<input type="number" name="cf_962" class="form-control" v-model="fillProfile.cf_962" step="0.1" :readonly="(fillProfile.cf_962>0.00) ? true : false">
the problem with this now is that always that i writed on the input if the value is higher than 0 the input is readonly and i dont want that.. how can do that with vuejs 2?.. thank you.

What you are trying achieve can be done easily using v-once directive
<input type="number" name="cf_962" class="form-control" v-model="fillProfile.cf_962" step="0.1" :readonly="(fillProfile.cf_962>0.00) ? true : false" v-once>
As mentioned in docs
You can also perform one-time interpolations that do not update on
data change by using the v-once directive, but keep in mind this will
also affect any other bindings on the same node
v-once will let you set readonly for the inputs having pre populated data, and not readonly for the inputs which are not pre populated. This thing will happen only once so next time you write on the input it will won't affect the readonly anymore.

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.

AngularJS ng-repeat input

I am trying to make comments functionality using Angular js. The problem is that when i want to write a comment for a post, the text is also writing inside other input elements (comments). I write a text inside one input, but it writes it in all inputs
So for example same is happening with this code
<div class="comments" ng-repeat="articles in [1,2,[4,5,6]]">
<div ng-repeat="comments in articles">
<div>
<input type="text" ng-model="$parent.new">
</div>
</div>
if i use new instead of $parent.new i get undefined, but when i use $parent.new and i write in one input, it also writes in other inputs.

The issue is that you are assigning all of the inputs to the same model, so your inputs are all in sync with the same object.
What you need is to assign each input to a different model. I'm guessing you need these models to be dynamic, so you should use an array as your model and track your ng-repeat by $index like so:
<div ng-repeat="comments in articles track by $index">
<div>
<input type="text" ng-model="arr[$index]">
<span ng-if="arr[$index]">
{{arr[$index]}}
</span>
</div>
</div>
Now, in your controller, you can initialize the empty arr like so:
$scope.arr = [];
Now, your inputs will be in sync with $scope.arr depending on the index they were in.
Try out this jsfiddle for an example.

This is because you've giving same model (ng-model="$parent.new") for all of the inputs What you should do to avoid this problem is assign different model to each input element. Something like
<div class="comments" ng-repeat="articles in [1,2,[4,5,6]]">
<div ng-repeat="comments in articles">
<div>
<input type="text" ng-model="comments">
</div>
</div>

Change ng-model of input to
<input type="text" ng-model="comments.comment">

Angular - input value and select placeholder not working

I'm creating a form that has some select and some input types, as shown below.
<div id="datiRichiesta">
<div *ngFor="let d of formDatiRichiesta" class="form-row">
<input *ngIf="d.type=='text'"
type="text"
class="form-control"
placeholder="{{d.placeholder}}"
[(ngModel)]="model[d.name]"
name="{{d.name}}"
(focus)="$event.target.placeholder = ''"
(blur)="$event.target.placeholder = d.placeholder"
value="richiesta.prova"/>
<select *ngIf="d.type=='select'"
class="form-control"
name="{{d.name}}"
[(ngModel)]="model[d.name]"
required>
<option selected disabled value="">{{d.placeholder}}</option>
<option *ngFor="let b of elencoBanche" value="{{b.id}}">{{b.nome}}</option>
</select>
</div>
</div>
I've got two main issues:
I need to set a value on the input type, but it is not working. I know that I should use something like ngValue, or at least so I've read online, but most examples are referred to angularjs and I got a bit confused. If I simply put [ngValue]="richiesta.prova" the browser complains that Can't bind to 'ngValue' since it isn't a known property of 'input'.
I need to show a placeholder for the select, but it's not working since the first <option> is part of the dropdown list as all the others. On this I don't have a clue, because it should really work as it is.
Any help will be appreciated, maybe with some explanation, I sense I'm missing something about angular binding.
Thanks.

1) NgModel sets the value. If model[d.name] is not empty - it will be set.
https://angular.io/guide/forms
2) How to show placeholder (empty option) in select control in Angular 2?
These 2 lines are redundant:
(focus)="$event.target.placeholder = ''"
(blur)="$event.target.placeholder = d.placeholder"

If your placeholder is not working then it simply means that you have assigned them some value to that input. In your case, I am 100% sure that {{ d.placeholder }} holds some value( might be value equal to ' '). Assign this value to NULL. Then see the result.
placeholder="{{d.placeholder}}"

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.