I am currently working on an app, in which you can edit items, which will be updated in a DB. Because I don't want people to submit empty forms, I prepopulate the inputs with the current item.
form.form-update(method="post", ng-repeat='item in items', autocomplete="off" ng-submit='edit()')
.form-group
label(for='key') Key:
input.form-control(type="text" id="key" ng-init="key.updateKey='{{item.key}}' " value='{{item.key}}' name='keyUpdate' ng-model='key.updateKey')`
.form-group
button.btn.btn-primary(type="submit") Save
a.btn(href='/') Cancel`
Now when I submit this as an empty Form, I don't get the old data saved, but {{item.key}} in the Database.
OK, I just found out, what was causing the error. It turns out that you dont neet the {{}}, so it turns into this:
input.form-control(type="text" id="key" ng-init="key.updateKey=item.key", name='keyUpdate' ng-model='key.updateKey')
Related
I am working for the first time with reactive forms in Angular(v7)
I want to make my submit button enabled if any of the fields has changed. So I am working with the dirty value of the form.
For a simple scenarios its working. I change a input type text and the button became enable.
But now I got a problem with an element (<span id="locationUpdated">) that the value inside of it is being changed by the result of some other javascript functions.
So I decided to listening the change of an hidden input that get the value the same way as the span element
<form [formGroup]="model.form" >
....
<input id="nameInput" type="text"
[(ngModel)]="model.user.name"
formControlName="name" />
...
<span [textContent]="model.user.location.label" id="locationUpdated"></span>
<input type="hidden" [value]="model.user.location.label" formControlName="location" />
....
<button [ngClass]="{'disabled': !model.form.dirty}></button>
</form>
--- Component ---
private buildFormUpdated() {
this.model.form = this.formBuilder.group({
name: [this.model.user.name, [Validators.required]],
location: [this.model.user.location.label]
});
}
I replace the hidden to text so I can see the value change and it is working fine.
However the property dirty continues false. If I change manually I get the dirty:true
What am I missing?
Thanks
What am I missing?
The dirty flag is not set to true when the data is changed programatically.
It is set to true only if the user blurs the control component, or changes the value (through the UI)
Please ref official docs - https://angular.io/guide/form-validation#why-check-dirty-and-touched
you can explicit marks the control as dirty by doing this after your logic
this.model.form.markAsDirty();
J'm trying to pass some data from javascript to #ENV in hidden input value, in CVT form.
In the form i have some radio inputs which are working fine and one hidden input to get the leaflet coordinates stored in js variable.
My input looks lick that:
<input value='#ENV{localisation, #GET{coord}} 'name="localisation" type="hidden"></input>
and my code:
[(#SET{coord, JSON.stringify(latlng_tab)})];
In the
console.log (#ENV{localisation, #GET{coord}})
I can see the coordinates but it doesn't work in input.
Can someone help me, please.
In case someone will be looking for an answer.
I had to remove #GET from input and #SET from the code and instead i'm using that:
<input id="localisation" value='' name="localisation" type="hidden">
</input>
var latlng_str = document.getElementById("localisation");
latlng_str.value = JSON.stringify(latlng_tab);
I want to display a list of things and let users edit them.
The list is generated using ng-repeat. At first when it was displayed, it should be in the form of pure texts. But when the user pushed the corresponding edit button, it should be changed into an input textfield, with the contents unchanged. When the user submits the form, the data is saved and the input should be changed back to pure texts.
Is this compatible with the Angular way of thinking? If so, how do I realize it? If not, what is the correct way to realize the idea in AngularJS?
Something like this would probably work:
<ul>
<li ng-repeat='item in items'>
<span ng-hide='item.editing'>item.value</span>
<input type='text' ng-show='item.editing' ng-model='item.value' />
<button ng-click='item.editing = !item.editing'>Edit</button>
</li>
</ul>
Then in your submit action set item.editing = false for every item in items
other way or way that i prefer with angular js is to keep a track of current item on scope, this works better if you the fields being edited are in large number
$scope.currentitem;
setting current item equal to the item tha's being edited
<button ng-click='currentitem = item'>Edit</button>
Now you can have an form filled in like
<input type='text' ng-model='currentitem.value' />
I have a form in Laravel using Knockout.js, the input data-bind gets the last data from mysql. Everything works fine but a simple textfield to write in some values for the data is not what I want and a multiselect is not working for me.
I've searched for something to add values to this textfield and I've found the TextExt plugin. Now I can add some values like on this site the Tags field and save them.
In TextExt JS I can set the tagged values on page startup with
tagsItems: {{ $title->language }},
title->language get the Data from mysql and shows it as tags, but now I have the tagged values on startup and the data-bind value with the same data only as text and I need to delete them first before I can edit it.
Is there a way to hide the value from the data-bind or clear it on startup? Here is the form code I'm using
<input type="text" id="language" class="text-core" data-bind="value: app.models.title.language, valueUpdate: 'keyup' " placeholder="Language">
**edit** this is the working form
{{ Form::label('language', trans('dash.language')) }}
{{ Form::text('language', Input::old('language'), array('class' => 'text-core')) }}
When I delete the data-bind value I can't update the data.
I found something to clear the textfield on focus, but I want the tagged values on start because the data-bind value is only shown as text.
Have you some ideas how to do this?
I'm trying to make an Angular.js app that creates dynamic form inputs from a JSON object.
So firstly, I have a JSON object (called fields):
[
{"field_id":209,"form_id":1,"name":"firstname","label":"First Name","type":"text"},
{"field_id":210,"form_id":1,"name":"lastname","label":"Last Name","type":"text"},
{"field_id":211,"form_id":1,"name":"email","label":"Email","type":"text"},
{"field_id":212,"form_id":1,"name":"picture","label":"Picture","type":"file"},
{"field_id":213,"form_id":1,"name":"address","label":"Address","type":"file"},
{"field_id":214,"form_id":1,"name":"password","label":"Password","type":"password"},
{"field_id":215,"form_id":1,"name":"","label":"","type":"submit"}
]
The object key type is the input type for a form. See below:
<p ng-repeat="field in fields">
{{field.name}} : <input type="{{field.type}}" value="{{record.data[field.name]}}" />
</p>
Now this works completely fine for submit, text, password, checkbox and radio fields. But if the type is file, it sets the input type to text.
If I replace {{field.name}} with {{field.type}} for the text, I can confirm it is outputting file.
If I statically change <input type="{{field.type}}"... to <input type="file"... it will display a file input correctly.
Why won't it let me set an input type as a file dynamically?
Topic if changing type property if <input> element is hot topic.
Actually, as AngularJS behaviour depends on was jQuery added (before or after angular.js).
Here you can read some discussion about possibility to change type:
change type of input field with jQuery
Also there is pull request to AngularUI for adding new directive with support of dynamic type change: https://github.com/angular-ui/angular-ui/pull/371
If you find suggested solution is not good enough (though as type is not changed after you render form) you can go with ng-switch way - just show corrent input for user.