i'm new to Angular 5 and i'm trying to make a CRUD.
i'm struggling with the "update" part.
what i'd want to do is, in my form, getting back the data of the Model to fill the input text with, then, when i click on the update button, updating the all model.
I tried so many thing from tuts and forums that i'm completly lost now. So here is what i have.
html :
<form [formGroup]="policyForm" (ngSubmit)="update()">
<mat-form-field>
<input formControlName="policyName">
</mat-form-field>
... Many other inputs
<button type="submit" color="primary">Update</button>
</form>
component :
export class PolicyUpdateComponent implements OnInit {
policyModel: PolicyModel;
policyId = +this.route.snapshot.paramMap.get('id');
policyForm: FormGroup;
formBuilder: FormBuilder;
constructor(
private policyService: PolicyService,
private route: ActivatedRoute,
private router: Router,
private fb: FormBuilder
) {
this.policyService.get(this.policyId)
.subscribe(policy => this.policyModel = policy);
}
ngOnInit() {
this.createForm();
}
createForm() {
this.policyForm = this.fb.group({
policyName: [this.policyModel.name, Validators.required]
});
}
update(id: number) {
id = this.policyId;
this.policyModel = <PolicyModel>this.policyForm.value;
this.policyService.update(id, this.policyModel).subscribe(res => {
this.router.navigate(['/policies', id, 'get']);
}, (e) => {
console.log(e);
}
);
}
}
service :
/**
* Update a policy with new parameters
* #param pm PolicyModel
*/
update(id: number, pm: PolicyModel): Observable<any> {
return this.http.put<PolicyModel>(`${environment.baseApiUrl}/${environment.apiVersion}/policies/${id}`, {pm});
}
any help would be nice.. thanks guys!
Change the code according to this.
<form [formGroup]="policyForm" >
<mat-form-field>
<input formControlName="policyName">
</mat-form-field>
<button color="primary" (click)="update()">Update</button>
</form>
Add subscription to detect form changes.
ngOnInit() {
this.createForm();
this.policyForm.valueChanges.subscribe(
(data) => {
if (JSON.stringify(data) !== JSON.stringify({})) {
this.policyModel.name = data.policyName;
}
});
}
createForm() {
this.policyForm = this.fb.group({
policyName: [this.policyModel.name]
});
}
update(id) {
this.policyModel.id = id;
id = this.policyId;
this.policyService.update(id, this.policyModel)//.subscribe(res => {
this.router.navigate(['/policies', id, 'get']);
}, (e) => {
console.log(e);
}
);
}
Sample code : https://stackblitz.com/edit/angular-wwt91u
First I show a list of transactions, when a user selects a single transaction a new page is opened with the transaction ID in the URL. On this page are details of the transaction displayed.
The code below is just the details page. It shows all the right details.
One of the details is a list of 0 or more tags, I'd like to be able to edit the list of tags and save the result.
At this point, I always end up with a clean Input field and I do not understand how to populate this field with the existing transaction['tags'] data.
It seems that the transaction['tags'] is not initialized until the page is rendered, I cannot use it in the constructor or in the componentDidMount.
What I expect is that the transaction object as stated in the mapStateToProps is available and I can change the line in the constructor from: this.state = {value: ''}; to this.state = {value: transaction['tags']}
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { fetchTransaction } from '../actions';
class TransactionsIndex extends Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
componentDidMount() {
const { _key } = this.props.match.params;
this.props.fetchTransaction(_key);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
render() {
const { transaction } = this.props;
if (!transaction) {
return <div>Loading...</div>;
}
let tags = null;
tags =
<div>
<form onSubmit={this.handleSaveTagsclick}>
<input type="text" value={this.state.value} onChange={this.handleChange} />
<input type="submit" value="Submit" />
</form>
</div>
// console.log(transaction['tags']);
return (
<div className="container">
<div className="well">
<div>Transactiedatum: { transaction["Transactiedatum"] }</div>
<div>Valutacode: { transaction["Valutacode"] }</div>
<div>CreditDebet: { transaction["CreditDebet"] }</div>
<div>Bedrag: { transaction["Bedrag"] }</div>
<div>Tegenrekeningnummer: { transaction["Tegenrekeningnummer"] }</div>
<div>Tegenrekeninghouder: { transaction["Tegenrekeninghouder"] }</div>
<div>Valutadatum: { transaction["Valutadatum"] }</div>
<div>Betaalwijze: { transaction["Betaalwijze"] }</div>
<div>Omschrijving: { transaction["Omschrijving"] }</div>
<div>Type betaling: { transaction["Type betaling"] }</div>
<div>Machtigingsnummer: { transaction["Machtigingsnummer"] }</div>
<div>Incassant ID: { transaction["Incassant ID"] }</div>
<div>Adres: { transaction["Adres"] }</div>
<div>Status: { transaction["status"] }</div>
<div>Created: { transaction["created"] }</div>
{tags}
</div>
<Link to="/"><button type="button" className="btn btn-default">Back</button></Link>
</div>
);
};
}
function mapStateToProps({ transactions }) {
// console.log('transactions_selectedTransaction: ' + transactions['selectedTransaction']);
return { transaction: transactions['selectedTransaction'] };
}
export default connect(mapStateToProps, { fetchTransaction })(TransactionsIndex);
I found this but it did not help me: Redux-form: Set form values from state
and this: How to get state / value from form component?
I have a list of country objects, that I access and use with my reactive form. I create each one as a form control dynamically, because this list will be changing. Then I attempt to get the form and values in real time (not using a submit button), as the checkboxes get clicked, by using the ngOnChanges hook. this is obviously not working, what hook should I use? on another note, is this a bad way to accomplish this? what would be a better approach?
component
export class GeoDropComponent implements OnInit, OnChanges {
countries = [
{
name : 'USA',
continent : 'north america'
},
{
name : 'Canada',
continent: 'north america'
}
];
countriesForm: FormGroup;
constructor() { }
ngOnInit() {
// add checkbox for each country
this.countriesForm = new FormGroup({});
for (let i = 0; i < this.countries.length; i++) {
this.countriesForm.addControl(
this.countries[i].name, new FormControl(false)
)
}
}
ngOnChanges() {
console.log(this.countriesForm);
}
}
html
<div class="geo-list">
<div class="content-box container">
<form [formGroup]="countriesForm">
<div class="country" *ngFor="let country of countries">
<input
type="checkbox"
formControlName="{{country.name}}"
>
{{ country.name }} | {{ country.continent }}
</div>
</form>
</div>
</div>
you can try like this. when ever search checkbox is selected or selected change method will update selected items
pseudo code
<input
type="checkbox"
formControlName="{{country.name}}"
(change)="search(country, $event)
>
component file.
selectedItems : any [] = [];
search(country, event) {
var index = this.selectedItems.indexOf(country.name);
if (event.target.checked) {
if (index === -1) {
this.selectedItems.push(country.name);
}
} else {
if (index !== -1) {
this.selectedItems.splice(index, 1);
}
}
}
}
How do I populate a dropdown with records/documents created by the logged in user? I have a collection that many users can create schools. I want it to be that if a user that have created more than a school the dropdown should show populated with the number of schools. If it is only one, the _id of the school should just be passed to a hidden field.
This is the school collection:
if (Meteor.isServer) {
Meteor.methods({
SchoolRegister: function (newschoolname, newschoolmotto, newschholvision, sellschool, schooltype,
schoolfeerange, schoolcurriculum) {
if (!Meteor.userId()) {
throw new Meteor.Error('Not authorized', 'You must be logged in to add a new school!');
return false;
}else{
var regUsername = Meteor.user().username;
var year = new Date().getFullYear();
var month = new Date().getMonth() + 1;
var day = new Date().getDate();
var date = (month +"/" +day +"/" +year).toString();
var schoolId = NewSchoolDB.insert({
newschoolnamevar: newschoolname,
newschoolmottovar: newschoolmotto,
newschholvisionvar: newschholvision,
sellschoolvar: sellschool,
schooltypevar: schooltype,
schoolfeerangevar: schoolfeerange,
schoolcurriculumvar: schoolcurriculum,
createdAt: new Date(),
author: regUsername,
authorId: Meteor.userId()
});
return schoolId;
}
},
UserRecords: function () {
if (!Meteor.userId()) {
throw new Meteor.Error('Not authorized', 'You must be logged in to add a new school!');
return false;
}else{
//var UserDocuments = NewSchoolDB.find({authorId: Meteor.userId()}).count();
return NewSchoolDB.find({authorId: Meteor.userId()});
}
}
});
}
I'm using this to call the method:
Template.SchoolContactLayout.helpers({
UsersDocuments: function () {
return Meteor.call('UserRecords');
console.log(Meteor.call('UserRecords'));
}
});
This is the template file
{{# if UsersDocuments == 1 }}
<input type="hidden" name="schoolId" value="{{ UsersDocuments._id }}">
{{else}}
<div class="form-group">
<select class="form-control" name="schoolnames" id="schoolnames" required style="color: black; width: 100%; font-family: 'candara'">
<option value="{{UsersDocuments._id}}">{{UsersDocuments.newschoolnamevar}}</option>
</select>
</div>
{{/if}}
All in all, no error was returned and it did not work.
Meteor.call('UserRecords') is Async function you have to wait for it in a callback and use session instead.
Meteor.call('UserRecords', function(err,res){
// res will be your return value you can set your session here
});
or you can use package for example you can search atmosphere for reactive method
Trying to use jquery-chosen with vue, the problem is that this plugin hides the actual select that I applied v-model, so when I select a value vue doesn't recognize it as a select change event and model value is not updated.
The value of the select is being changed actually when I select something, I've inspected this with console.log to see the selected value.
http://jsfiddle.net/qfy6s9Lj/3/
I could do vm.$data.city = $('.cs-select').val(), that seems to work,
But is there another option? If the value of the select was changed why vue doesn't see this?
#swift's answer got pretty close, but as #bertrand pointed out, it doesn't work for multiselects. I've worked something out that works with both cases: http://jsfiddle.net/seanwash/sz8s99xx/
I would have just commented but I don't have enough rep to do so.
Vue.directive('chosen', {
twoWay: true, // note the two-way binding
bind: function () {
$(this.el)
.chosen({
inherit_select_classes: true,
width: '30%',
disable_search_threshold: 999
})
.change(function(ev) {
// two-way set
// Construct array of selected options
var i, len, option, ref;
var values = [];
ref = this.el.selectedOptions;
for (i = 0, len = ref.length; i < len; i++) {
option = ref[i];
values.push(option.value)
}
this.set(values);
}.bind(this));
},
update: function(nv, ov) {
// note that we have to notify chosen about update
$(this.el).trigger("chosen:updated");
}
});
var vm = new Vue({
data: {
city: 'Toronto',
cities: [{text: 'Toronto', value: 'Toronto'},
{text: 'Orleans', value: 'Orleans'}]
}
}).$mount("#search-results");
I am opened for other suggestions, but for the time-being I did it this way:
html
<div id='search-results'>
{{city}}
<select class="cs-select" v-model='city'>
<option value="Toronto">Toronto</option>
<option value="Orleans">Orleans</option>
</select>
</div>
js
window.vm = new Vue({
el: '#search-results',
data: {
city: 'Toronto',
}
})
$('.cs-select').chosen({
inherit_select_classes: true,
width: '30%'
}).change( function() {
vm.$data.city = $('.cs-select').val()
})
Update: Be advised this doesn't work from within a v-for loop. A related question that deals with that is available here.
Going off of #kaktuspalme's solution, and with help from my friend Joe Fleming, I came up with a solution that works with Vue 2 and allows single and multiple selections:
Vue.directive('chosen', {
inserted: function(el, binding, vnode) {
jQuery(el).chosen().change(function(event, change) {
if (Array.isArray(binding.value)) {
var selected = binding.value;
if (change.hasOwnProperty('selected')) {
selected.push(change.selected);
} else {
selected.splice(selected.indexOf(change.deselected), 1);
}
} else {
var keys = binding.expression.split('.');
var pointer = vnode.context;
while (keys.length > 1)
pointer = pointer[keys.shift()];
pointer[keys[0]] = change.selected;
}
});
},
componentUpdated: function(el, binding) {
jQuery(el).trigger("chosen:updated");
}
});
Use it like this:
<select v-model="mymodel" v-chosen="mymodel">...</select>
It works with multiple="multiple" and even with nested state, e.g.:
<select v-model="nested.mymodel" v-chosen="nested.mymodel">...</select>
See the fiddle here: https://jsfiddle.net/tylercollier/bvvvgyp0/5/
Answer:
http://jsfiddle.net/qfy6s9Lj/5/
<div id='search-results'>
Vue model value <br>
{{city}}
<hr>
Select value:
<select class="cs-select" v-chosen>
<option value="Toronto">Toronto</option>
<option value="Orleans">Orleans</option>
</select>
</div>
Vue.directive('chosen', {
bind: function () {
var vm = this.vm;
this.el.options = vm.cities;
this.el.value = vm.city;
$(this.el).chosen({
inherit_select_classes: true,
width: '30%',
disable_search_threshold: 999})
.change( function() {
vm.city = this.el.value;
}.bind(this)
);
}
});
var vm = new Vue({
data: {
city: 'Toronto',
cities: ['Toronto', 'Orleans']
}
}).$mount("#search-results");
UPDATE: an even better solution (thanks to simplesmiler):
http://jsfiddle.net/simplesmiler/qfy6s9Lj/8/
I made an update for vue2.
Vue.directive('chosen', {
selected: null,
inserted: function (el, binding) {
selected = binding.value;
$(el).chosen().change(function(event, change) {
if(change.hasOwnProperty('selected')) {
selected.push(change.selected);
} else {
selected.splice(selected.indexOf(change.deselected), 1);
}
});
},
componentUpdated: function(el, binding) {
selected = binding.value;
$(el).trigger("chosen:updated");
}
});
var vm = new Vue({
el: '#app',
data: {
selected: [],
cities: [{id: 1, value: "Toronto"}, {id: 2, value: "Orleans"}, {id: 3, value: "Bern"}]
}
});
See: https://jsfiddle.net/kaktuspalme/zenksm2b/
Code taken from #kaktuspalme answer. It works with non-multiple elements now and only for non-multiple.
Vue.directive('chosensingle', {
inserted: function (el, binding) {
var selected = binding.value;
$(el).chosen().change(function(event, change) {
if(change.hasOwnProperty('selected')) {
selected.value = change.selected;
} else {
selected.value ='';
}
});
},
componentUpdated: function(el, binding) {
$(el).trigger("chosen:updated");
}
});
Comments from #Tyler Collier are taken into account
But be carefully,property you use in v-model should be defined as array , e.g. applicantId: [] otherwise it doesn't work