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
});
Related
I am currently working on an inventory system that takes a Part Collection, and a Purchase Collection as the backbone of the application. Each part much have a corresponding purchase. I.E a Part must have a partId, serial number, and cost number associated with it. I am using Meteor.js with coffeescrip, jade, and Graphr. I can insert into each collection individually, but they do not seem connected. I have set up the linkers between the two connection but I am a little lost as to where to go next
here is a snippet of the collections
Purchase Collection
PurchaseInventory.schema = new SimpleSchema
partId:
type:String
optional:true
serialNum:
type:Number
optional:true
costNum:
type:Number
optional:true
Parts Collection/schema
Inventory.schema = new SimpleSchema
name:
type:String
optional:true
manufacturer:
type:String
optional:true
description:
type:String
optional:true
parts query
export getInventory = Inventory.createQuery('getInventory',
$filter: ({ filters, options, params }) ->
if params.filters then Object.assign(filters, params.filters)
if params.options then Object.assign(options, params.options)
return { filters, options , params }
name:1
manufacturer:1
description:1
pic:1
purchase:
partId:1
)
purchase query
export getPurchase = PurchaseInventory.createQuery('getPurchase',
$filter: ({ filters, options, params }) ->
if params.filters then Object.assign(filters, params.filters)
if params.options then Object.assign(options, params.options)
return { filters, options , params }
serial:1
cost:1
date:1
warrentyDate:1
userId:1
)
Linkers
//Parts
Inventory.addLinks
purchase:
collection:PurchaseInventory
inversedBy:"part"
//purchases
PurchaseInventory.addLinks
part:
type:'one'
collection:Inventory
field:'partId'
index: true
And finally the Jade/Pug auto form
+autoForm(class="inventoryForm" schema=schema id="inventoryInsertForm" validation="blur" type="method" meteormethod="inventory.insert")
.formGroup
+afQuickField(name="name" label="Name")
+afQuickField(name="manufacturer" label="Manufacturer")
+afQuickField(name="description" label="Description")
button#invenSub(type="submit") Submit
To reiterate my goal is to have each item in parts to have a link to its corresponding purchase data.
The most straight forward way is to use autoform form type normal and create a custom event handler for the submit event (alternatively you can use the AutoForm hooks onSubmit). From there you can use the AutoForm.getFormValues API function to get the current document.
Since I am not into Coffeescript I would provide the following as Blaze/JS code but I think it should give you the idea:
{{# autoForm type="normal" class="class="inventoryForm" schema=schema id="inventoryInsertForm" validation="blur"" schema=schema id="insertForm" validation="blur" }}
<!-- your fields -->
{{/autoForm}}
/**
* validates a form against a given schema and returns the
* related document including all form data.
* See: https://github.com/aldeed/meteor-autoform#sticky-validation-errors
**/
export const formIsValid = function formIsValid (formId, schema) {
const { insertDoc } = AutoForm.getFormValues(formId)
// create validation context
const context = schema.newContext()
context.validate(insertDoc, options)
// get possible validation errors
// and attach them directly to the form
const errors = context.validationErrors()
if (errors && errors.length > 0) {
errors.forEach(err => AutoForm.addStickyValidationError(formId, err.key, err.type, err.value))
return null
} else {
return insertDoc
}
}
Template.yourFormTempalte.events({
'submit #insertForm' (event) {
event.preventDefault() // important to prevent from reloading the page!
// validate aginst both schemas to raise validation
// errors for both instead of only one of them
const insertDoc = formIsValid('insertForm', PurchaseInventory.schema) && formIsValid('insertForm', Inventory.schema)
// call insert method if both validations passed
Meteor.call('inventory.insert', insertDoc, (err, res) => { ... })
Meteor.call('purchaseInventory.insert', insertDoc, (err, res) => { ... })
}
})
Note, that if you need both inserts to be successful on the server-side you should write a third Meteor method that explicitly inserts a single doc in both collection in one method call. If you have Mongo version >= 4 you can combine this with transactions.
How to update some field in nested object without overwriting other fields in that nested object with spread operator? My function is as follows
exports.handler = ((data, context) => {
const profile = data.profile
const uid = context.auth.uid
const newRef = db.collection("user").doc(uid)
return newRef.update({
profile: {...profile}
}).then(() => {
return "Data updated seccusfully"
})
})
which is suppose to update nested profile object. However the function removes also all not specified fields in that object. Is there any way to achieve update object with spread operator without removing other fields or do we have to specify each fields as the documentation says?
db.collection("users").doc("frank").update({
"age": 13,
"favorites.color": "Red"
})
My profile object contains different fields for each type of user and I'm updating the profile fileds in multiple places therefore I was hoping to simplify it like this
It looks like we can update some object properties without overwriting others with set method like this. Strange it doesn't work with update
return newRef.set({
profile: { ...profile }
}, { merge: true }).then(() => {
return "Data updated seccusfully"
})
Really appreciate all your help
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 have a form group like so:
this.form = fb.group({
'teacher': [''],
'schools': fb.array([
fb.group({
'school_name': [''],
'school_description': [''],
'events': fb.array([
fb.group({
'event_name': ['']
})
])
})
])
});
const control = (<FormArray>this.form.controls['schools']).controls[0]['events'];
How do I get the nested array control 'events'?
const control = (<FormArray>this.form.controls['schools']).controls[0]['events'];
I recommend having a look at the Angular 2 examples for nested form array and nested form group for a look at how to build complex forms. With FormGroup, you can use .get(name: string) to retrieve a control. This example gets the schools FormArray control:
this.form.get('schools')
For FormArray, you can retrieve a control from the array using .at(index: number). This example gets the first FormGroup control in the array:
this.schools.at(0)
To put it all together, there are nicer (read: more reusable, more readable) ways to express this but this chain will get you the first event from your first school:
this.form.get('schools').at(0).get('events')
Here's a working plnkr example.
You should use this code:
let listForm: any;
var subFormGroup = new FormGroup({});
subFormGroup.addControl("Your Controll Name", new FormControl('',res["Required"] ? Validators.required : null))
listForm = this.builder.array([
subFormGroup
]);
this.form.addControl("Your new ArrayControll Name", listForm);
When you have an Array of Object,you can use that:
let listForm: any;
var controlItems =[Your Object Array];
var subFormGroup = new FormGroup({});
Object.keys(controlItems).forEach(function(key){
subFormGroup.addControl(controlItems[key], new FormControl('',res["Required"] ? Validators.required : null))
})
listForm = this.builder.array([
subFormGroup
]);
this.form.addControl("Your new ArrayControll Name", listForm);
In case you want to change a value for a nested FormArray, for me this works:
(<FormArray>this.formModel.controls['schools']).at(el).patchValue({school_name:'your new value'});
el is the index element for which one you want to apply the patch value.
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!