So I'm just learning Angular and I have basic routing setup and a partial for setting up a basic page with a form (theoretically any form), and based on the controller I load it loads that form from a fields array in the controller.
One of those forms is a registration form where I want to verify that the passwords match.
So in the partial I have (a mode complicated version of) this
<input ng-repeat="field in fields" ng-model="field.model" mustEqual="fields.mustEqual">
I found a directive which does password comparison:
taskDivApp.directive('mustEqual', function() {
return {
restrict: 'A', // only activate on element attribute
require: '?ngModel', // get a hold of NgModelController
link: function(scope, elem, attrs, ngModel)
{
if(!ngModel) return; // do nothing if no ng-model
// watch own value and re-validate on change
scope.$watch(attrs.ngModel, function()
{
validate();
});
// observe the other value and re-validate on change
attrs.$observe('equals', function (val)
{
validate();
});
var validate = function()
{
// values
var val1 = ngModel.$viewValue;
var val2 = attrs.mustEqual;
// set validity
ngModel.$setValidity('equals', val1 === val2);
};
}
}
});
So basically all I want to do is be able to load a literal string into ng-model from the controller so that I can pair up the model and the must equal, so the data for the form would look like:
$scope.fields = [
{
'type':"Email",
'placeholder':"Email Address",
'req': true,
'focus':true
},
{
'type':"Password",
'placeholder':"Password",
'model': "password",
'mustEqual': "passwordConf"
},
{
'type':"Password",
'placeholder':"Comfirm Password",
'model':"passwordConf",
'mustEqual': "password"
}
];
However what happens now is that the main password field gets bound to the "model" field of its index in the array and similar for passwordConf (ie inital values literally "password" and "passwordConf")
The fact that this isn't easy makes me think I have the wrong mindset - is this not a good way to do forms, should I just have them hard coded?
If this is okay then any ideas on how I could accomplish it would be appreciated!
Related
I have a big form (10+ inputs) which values I want to bind (like v-model) with object I have in vuex store, on submission it needs to send axios request to server (server will handle validation) and respond with error object (this field is required, this value is too short, etc...).
I will provide minimalistic example with just one input field.
Object student is for student itself obviously, and error object will be there to handle errors from server response.
App.vue
<template>
<div>
<input v-model="student.name">
<span>{{error.name}}</span>
</div>
</template>
<script>
import { mapActions } from "vuex";
export default {
name: "App",
computed: {
student.name: {
get () {
return this.$store.state.student.name
},
set (value) {
this.$store.commit('setStudentName', value)
}
},
error.name: {
get () {
return this.$store.state.error.name
},
set (value) {
this.$store.commit('setErrorName', value)
}
}
}
}
</script>
and this is mu vuex store:
export default {
state: {
student: { name: ''},
error: { name: ''}
},
mutations: {
setStudentName: (state, student.name) => (state.student.name = student.name),
setErrorName: (state, error.name) => (state.error.name = error.name)
}
}
So this works perfectly, but imagine having 10+ inputs and having to write setters and getters for 10 inputs x 2 objects (student and error), that is like 40 setters&getters at least.
Is there a easier way to do this?
I have also tried vuex-forms which is great, but package is incomplete and documentation is missing, tried vuex-map-fields, which is good only for handling one object at the time.
All suggestions are welcome, what it the correct way to do this?
Very new to Vue2, so far so good but I hit a little snag and front end is not my forte.
The table(vue-tables-2) displays correctly what's in the database. I am passing an id in a function to determine what particular row to update but I also want to update the value of the checkbox in the database whenever I press it. How can I achieve that? Many thanks.
<v-client-table :data="tableData" :columns="columns" :options="options" >
<input type="checkbox" v-model="props.row.powerOff" #change="powerOff(props.row.id, props.row.powerOff)">
</v-client-table>
export default {
data() {
return {
columns: ['id', 'name', 'location.address', 'status', 'payment', 'powerOff'],
tableData: []
}
},
created() {
HTTP.get('test').then( response => {this.tableData = response.data;})
.catch( error => {});
},
methods: {
powerOff(id, currentPowerOff) {
var testURL = 'test/' + id
HTTP.patch(testURL, {id, currentPowerOff})//
.then( response => {})
.catch( error => {console.log(error); });
}
}
}
It seems that changing from v-click:on to #change fixed my issue. Reading a little bit more about it, click event is run before v-model has updated the value, while #change does it afterwards. Thank you !
I am trying to create a validator in angular2 where I need to check the value of another form field. I have two scenarios I have tried where I have attempted to do this.
Scenario 1, form field looks like this:
Form = this._fb.group({
ansat: ['', [<any>Validators.required]],
helbred: ['', this.someValidator('ansat')],
});
I have the two fields above, and I would like to be able to check the value of "ansat" in the validator function "someValidator". someValidator looks like this:
someValidator(key: string) {
return (group: FormGroup) => {
console.log(group);
console.log(group.controls[key].value);
}
}
In my function, group includes all the correct information for my formgroup, but "controls" is undefined, which means I cannot get to the value of "ansat.
Scenario 2, form field looks like this:
this.myForm = this._fb.group({
ansat: ['', [<any>Validators.required]],
helbred: ['', c => Validators.compose([
this.someValidator(c,
group => group.controls['ansat'].value === 0
),
])]
});
And this is my someValidator function:
conditional(c, conditional) {
console.log(conditional);
console.log(c);
if(c.parent != undefined || c._parent != undefined){
if(c._parent.controls['ansat'].value === 0){
console.log(c._parent.controls['ansat'].value);
}
}
return null;
}
In this case, the control "c", has the correct information and includes a parent which is the group it is allocated in, but I cannot access it to try and get it's brother in the same group.
And in the case of conditional parameter, I tried sending the group through a function which I cannot make to get working either.
QUESTION: I would like to be able to access the value of "ansat" inside of a validator that I call on "helbred". How do I do this?
Any help is greatly appreciated!
Have a look at this plunker.
You're on the right track, you must pass the actual ansat control in the helbred control's validator, instead of only passing ansat control's value.
ansat: AbstractControl = new FormControl('', Validators.required);
helbred: AbstractControl = new FormControl('', Validators.required, this.someValidator(this.ansat));
this.myForm = this.formBuilder.group({
ansat: this.ansat,
helbred: this.helbred
});
I was wondering if there is a clean way in backbone to validate forms as you type without using a plugin. The issue is that if you have say a user model with: name, surname, email...
You can validate the model as a whole but not each model attribute individually.
Example:
var User = Backbone.Model.extend({
validate: function(attrs) {
if(!attrs.name) return "name not set"
}
var UserView = Backbone.View.extend({
events: { 'keyup input' : 'validateInput' },
validateInput: return this.model.isValid()
})
One generic method you can use is :
events: {
'keyup input': 'validateFeild'
},
validateFeild: function (event) {
var value = event.currentTarget.value;
var validator = $(event.currentTarget).attr('validator');
console.log(validator);
// Utils.validate(value, validator); here you can manage the validation in a separate utility class
}
and in your html have something like that :
<input id="label" type="text" validator="required" />
Here's the full example
I am using angularstrap typeahead directive. Its working fine with single object json values but its not working when replacing the json with my json object array.
Demo Json:
typeahead= ["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia"];
<input type="text" ng-model="typeaheadValue" bs-typeahead="typeahead">
The above code is working fine.
My JSON object array:
typeahead = [
{id: 1, name: 'name1', email: 'email1#domain.com'},
{id: 2, name: 'name2', email: 'email2#domain.com'},
{id: 3, name: 'name3', email: 'email3#domain.com'}
];
$scope.typeaheadFn = function(query) {
return $.map($scope.typeahead, function(contacts) {
return contacts;
});
}
<input type="text" ng-model="typeaheadValue" bs-typeahead="typeaheadFn">
Please give me some solution for this.
You want to map your items to a list of strings, I believe.
Try:
$scope.typeaheadFn = function(query) {
return $.map($scope.typeahead, function(contact) {
return contact.name;
});
}
(I should add that I am currently stumped by something similar)
If you have, for example:
items = [
{id: 1, name: 'name1', email: 'email1#domain.com'},
{id: 2, name: 'name2', email: 'email2#domain.com'},
{id: 3, name: 'name3', email: 'email3#domain.com'}
];
You will need:
<input type="text" bs-typeahead ng-model="selectedItem" ng-options="item.name for item in items|orederBy:'name'|filter:{name:$viewValue}:optionalCompareFn"></input>
If you exclude filter from ng-options matching will be done on every property of item object, so if you want it to be done on one property add filter:{propName:$viewValue}. Also, if you exclude optionalCompareFn, default comparison from angular will be applied, but you can add your custom one (on your $scope), with signature (actual is property value of the item, stated in filter, not the whole object).
optionalCompareFn(expected,actual){ return /compare and return true or false/}
Attempt 1
I finally got this semi-working after a huge amount of frustration.
An easy way to get your desired text appearing is for each item to have a toString method.
You might have something like
typeaheadData = [
{id: 1, text: "abc", toString: function() { return "abc"; }},
{id: 2, text: "def", toString: function() { return "def"; }}
]
Then you will see the correct text in the options that popup, but the matching won't yet work properly (the items shown by the widget won't match the text the user enters in the box).
To get this working I used the new filter option that's been added in the current git version of angular-strap. Note that it's not even in the pre-built dist/angular-strap.js file in the repository, you will need to rebuild this file yourself to get the new feature. (As of commit ce4bb9de6e53cda77529bec24b76441aeaebcae6).
If your bs-typeahead widget looks like this:
<input bs-typeahead ng-options="item for item in items" filter="myFilter" ng-model="myModel" />
Then the filter myFilter is called whenever the user enters a key. It's called with two arguments, the first being the entire list you passed to the typeahead, and the second being the text entered. You can then loop over the list and return the items you want, probably by checking whether the text matches one or more of the properties of an item. So you might define the filter like this:
var myApp = angular.module('myApp', ['mgcrea.ngStrap'])
.filter('myFilter', function() {
return function(items, text) {
var a = [];
angular.forEach(items, function(item) {
// Match an item if the entered text matches its `text` property.
if (item.label.indexOf(text) >= 0) {
a.push(item);
}
});
return a;
};
});
Unfortunately this still isn't quite right; if you select an item by clicking on it, then the text parameter will be the actual object from the items list, not the text.
Attempt 2
I still found this too annoying so I made a fork of angular-strap (https://github.com/amagee/angular-strap) which lets you do this:
typeaheadData = [
{id: 1, text: "abc"},
{id: 2, text: "def"}
]
//...
$scope.myFormatter = function(id) {
if (id == null) { return; }
typeaheadData.forEach(function(d) {
if (d.id === id) {
return d.text;
}
});
};
<input bs-typeahead ng-options="item for item in items" ng-model="myModel"
key-field="id" text-field="text" formatter="myFormatter" />
With no need to fuss around with toString methods or filters. The text-field is what the user sees, and the key-field is what is written to the model.
(Nope! Still doesn't work if you update the model without going through the view).
The formatter option is needed so when you set the model value to just the key field, the widget can figure out the right text to display.