I'm probably groping in a glass of water...
I have a data source like this in my controller
$scope.data = { name: John, lastname: Doh, age: 31 }
In my view i have a form to edit only name
<input type=text ng-model="data.name">
Now, on click i would like to send only the name to a specific service, but if I do http.patch('myapi/path',data) i send all the model data, also lastname and age...
Ho can i fix to send only name?
You have defined $scope.data to be an object with 3 keys name, lastnam and age. Then, you are using the same object to perform a http patch. If you only wish to send the new name, you can try this
http.patch('myapi/path',{name: data.name})
Related
I'm trying to implement a validation in which i want to disable the button if a specific value entered by user matches the value returned from a service, below is my code:
In the component, i call the service which returns the usernames like below, here is the console log for (UserNames):
0:{Name: "John", userId: "23432"}
1:{Name: "Smith", userId: "12323"}
2:{Name: "Alan", userId: "5223"}
3:{Name: "Jenny", userId: "124"}
in the template, i use NgFor to iterate over the usernames like below
<div *ngFor="let id of UserNames let i = index;">
<input type="radio" name="radio" [checked]="UserNames.userid" (click)="Submit(UserInput)"> <span>Submit</span>
</div>
What i want to achieve is if i enter 23432 the button should disabled because the service already returns userId with this value, unless a new user id entered the button should be enabled.
So the general case of disabling a submit button in the way you're describing would look like:
<button type="submit" [disabled]="someValidationFn()" ...>
and someValidationFn() would, according to the use case you described, contain something like
return UserNames.find(name => { return name.userId === userInput;}));
where userInput is a separate property in the component bound to some user-entered value, presumably via an open text input like
<input name="userInput" [(ngModel)]="userInput" type="text" placeholder="Enter some user id">
But, from the markup snippet you pasted*, I'm not clear that you have that "text" input separate from the radio button group. If the radio button group is meant to have submit actions attached to its individual buttons (it shouldn't), then you're actually guaranteed that the user selection will contain a userId which exists in your UserNames array: the only inputs you're offering are based on the data which came from your service in the first place.
Based on the use case you're describing, I'm not sure why you'd have the radio button group. It sounds like you would just want that text input field with a validation method to make sure that user input does not already exist in the UserNames.
Because I wrote a bunch of abstract snippets there, I thought it might be helpful to show some basic html and js where I put it all together:
// html
<form submit="someSubmitAction()">
<input name="userInput" [(ngModel)]="userInput" type="text" placeholder="Enter some user id">
<button type="submit" [disabled]="someValidationFn()">Submit</button>
</form>
// js
/* don't forget your #Component annotation and class declaration -- I'm assuming these exist and are correct. The class definition encloses all the following logic. */
public userInput: string;
public UserNames: any[];
/* then some service method which grabs the existing UserNames on component's construction or initialization and stores them in UserNames */
public someValidationFn() {
return UserNames.find(name => { return name.userId === userInput;}));
}
public someSubmitAction() {
/* presumably some other service method which POSTs the data */
}
*speaking of the snippet you pasted, there are a couple of errors there:
*ngFor="let id of UserNames <-- you won't get an id by referencing into the UserNames array here; you'll get a member of the UserNames array in each iteration -- i.e., you'd get {Name: "John", userId: "23432"}, then {Name: "Smith", userId: "12323"}, and so on. That's not necessarily an error, but I'm assuming that, b/c you used id as your variable name, you were expecting just the userId field. Otherwise you'd have to use {{id.userId}} in each iteration to access the actual id.
And bob.mazzo mentions another issue with the use of the [checked] attribute
I want to build a form dynamically based on a json response or from a database driven metadata collection/table in Angular 2
Day 1 : There are 3 fields in the json response object.
{
"first_name : "John",
"last_name" : "Doe",
"phone" : "88888888"
}
From this response the form looks like this:
First name: John
Last Name: Doe
Phone: 88888888
Day 5 : Another field called email is added to the json response which looks like this.
{
"first_name : "john",
"last_name" : "Doe",
"phone" : "88888888",
"email" : "john.doe#angular2.com"
}
Is it possible to show the email field in the browser without making any code change in angular 2.
i.e. therefore no test and deploy cycle.
i.e. dynamically build the form based on some form of database driven metadata or build the form based on the json response object.
The form should look as below:
First name: John
Last Name: Doe
Phone: 88888888
Email: john.doe#angular2.com
Is it possible to achieve in Angular 2?
From what I understand, you have a collection of objects. And you want to populate your fields dynamically.
So, an easy way to do that is in the client side, and I'm assuming you are using PHP, you can use something like this:
<div ng-init="yourAngularFunction(<?php $objUsed ?>);">
And in your Angular controller, something like to create a model:
$scope.yourAngularFunction = function(objUsed){
$scope.objUsed = objUsed;
}
And now in your PHP file, you can use, and show all your fields.
First name: {{objUsed.first_name}}
Last Name: {{objUsed.last_name }}
...
And you can also use an angular conditions, like ng-if to show or not the email field.
Hi i am making a edit profile page for a user, and i am using MEAN stack
saving a fresh user works fine, now for editing the details, I have fetched the saved user from mongodb and this is what i get on the browser console( which is correct)
...
firstName: "Syed",
middleName: "",
lastName: "Faizan",
dob: "07/06/2015"
...
when i try to map these values to the View, all the data is not getting filled in the View. (i am using the same form that i used to save a fresh user, so logically it should map correctly, but it isn't).
There are other fields too that aren't getting pre- filled( only some, not showing the full json)
and i would have shown the screenshot of the webpage, but it seems i can't attach a image unless i have 10 reputation.
i tried using $scope.$apply() method, no luck.
EDIT: Jade Code for the above
form.login-form.form-horizontal(method='post', role='form' name='userForm')
input#fName.form-control(placeholder='Your first name', required, name='fName', type='text', ng-model='UI.student.firstName')
input#mName.form-control(placeholder='Your middle name', name='mName', type='text', ng-model='UI.student.name.middleName')
input#lName.form-control(placeholder='Your last name', required, name='lName', type='text', ng-model='UI.student.name.lastName')
ng-bs3-datepicker#dob(name='dob', ng-model='UI.student.dob', language='en')
....
Controller Code:
$http.get("/fetchStudentData").success(function(response){
$scope.UI.student= response;
console.log(response);
})
I am creating arrays using Angularfire but I am unable to set the key name. Firebase is automatically giving me a cryptic key (eg Jm9vLy8Lye-KS35KsmL) but I would like to set it myself to something more meaningful. It is unclear how I do this in Angularfire. I am using the $add method on $firebaseArray:
var firebaseRef = new Firebase("https://firebase_location");
$scope.messages = $firebaseArray(firebaseRef);
$scope.messages.$add(
{
FirstName: patient.FirstName,
LastName: patient.LastName
}
).then(function(firebaseRef) {
var id = firebaseRef.key();
});
The data is stored fine and I can see it on my dashboard. However, id is always a cryptic firebase value. I would love to be able to set it myself to something meaningful. In my case the individual patient's ID would be meaningful...
Any thoughts?
Thank you!
Thanks for the response.
I found that the child function will do what I need. I first specify the child and then set it.
var patient_child = firebaseScreenRef.child(patient.PatientId);
patient_child.set(
{
FirstName: patient.FirstName,
LastName: patient.LastName,
});
Adding an item to a firebase array make firebase define a unique id for you. If this is not what you want, I think you can try getting the "messages" object with $firebaseObject, instead of getting just the list with $firebaseArray. Then you will be able to edit your object in js, in order to add your items to the messages collection. In this way you can use the id that best suits your needs. Finally, you have to $save() your entire object. Look here: https://www.firebase.com/docs/web/libraries/angular/api.html#angularfire-firebaseobject
Hope this helps.
For your question, I found an explanation. You don't need to use firebaseObject, you should use ref directly:
var ref = new Firebase(FURL);
createProfile: function(id ,user) {
var profile = {`enter code here`
name: user.name,
email: user.email,
gravatar: get_gravatar(user.email, 40)
};
var profileRef = $firebaseArray(ref.child('profile').child(id));
return ref.child('profile').child(id).set(profile);
},
In the code, I use ref to reference my URL. With profileRef, I created a child profile and I added id for the profile. Afterwards, I use ref directly to set the value profile for the id that I want. You see, it is very easy.
I´d like to create a content type called "contact" that will be share in other content types, like "client" and "prospect". When I create a new client, I´d like to be able to create, in the same form, new contacts for this client, like a field collection. For example:
ADD NEW CLIENT
Name:
Firm:
Email:
Contacts (multiple value)
Name:
Email:
Add new contact
But, in the "Contact" content type I have a lot more fields that I can fill up later:
Name:
Email:
Phone:
Address:
City:
State....
Thanks!
You could use the rules module to setup a rule that whenever a new 'Client' entity is created a new 'Contact' entity is created based on the values in the client contacts fields (name and email).
However I am unsure as to how you could implement an 'add another item' for field groups in a form (which is what I assume is the desired functionality of your 'Add new contact').
You may also want to make sure to include an entity reference field on your contact entity type, so that it can reference the client entity to which it is related. That would give you the option in the future to display a view of contacts related to a client.