Example Form So Far
This is my current code that works, without any checkbox handling started.
import React, { useState } from "react";
import "../admin/SysHealthForm.scss";
export default function SysHealthForm() {
const [input, setInput] = useState({
header: "",
content: "",
eta: "",
});
//When any change is registered, update the Name + Value with target.
//Return previous text and display as name: entered value
function handleChange(e) {
const { name, value } = e.target;
setInput((prevInput) => {
return {
...prevInput,
[name]: value,
};
});
}
//Stop Page Refreshing and Console.log the JSON
function handleClick(e) {
e.preventDefault();
console.log(input);
}
return (
<div className="widgit-syshealth">
<h2>System Health</h2>
<form>
<input
name="header"
placeholder="Header"
autoComplete="off"
onChange={handleChange}
value={input.header}
required
></input>
<textarea
name="content"
placeholder="Message"
autoComplete="off"
onChange={handleChange}
value={input.content}
required
></textarea>
<div className="form-school-check">
<div>
<input type="checkbox" id="syshpcb1" value="Fosseway"></input>
<label htmlFor="syshpcb1">Fosse Way</label>
</div>
<div>
<input type="checkbox" id="syshpcb2" value="Mendip"></input>
<label htmlFor="syshpcb2">Mendip</label>
</div>
<div>
<input type="checkbox" id="syshpcb3" value="Nunney"></input>
<label htmlFor="syshpcb3">Nunney</label>
</div>
<div>
<input type="checkbox" id="syshpcb4" value="Hayesdown"></input>
<label htmlFor="syshpcb4">Hayesdown</label>
</div>
<div>
<input type="checkbox" id="syshpcb5" value="Moorlands"></input>
<label htmlFor="syshpcb5">Moorlands</label>
</div>
<div>
<input type="checkbox" id="syshpcb6" value="Cameley"></input>
<label htmlFor="syshpcb6">Cameley</label>
</div>
<div>
<input type="checkbox" id="syshpcb7" value="St Mary's"></input>
<label htmlFor="syshpcb7">St Mary's</label>
</div>
<div>
<input type="checkbox" id="syshpcb8" value="Other"></input>
<label htmlFor="syshpcb8">Other</label>
</div>
</div>
<input
placeholder="ETA For Fix"
onChange={handleChange}
value={input.eta}
name="eta"
></input>
<button type="Submit" onClick={handleClick}>
Submit
</button>
</form>
</div>
);
}
At The Moment, when you submit the data. It logs the header, content and eta etc correctly
but i want it to essentially create an Array of all the checkboxes that are ticked.
I just don't know where i would even begin..
Will be pushing the data back up to a MongoDB Atlas database once recieved.
Thanks
Related
I am having an issue when I submit my form it puts all of the form data into my URL instead of sending it to my backend. I'm not sure what the issue is at first I thought it was because I didn't have a method="post" in the form tag but that didn't fix my issue because it tried to send the form data to localhost:3000/register instead of localhost:5000/register. Any help would be appreciated.
Bellow is my current Frontend code.
import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom'
import '../css/register.css';
import {IoMdArrowRoundBack} from 'react-icons/io'
import { useState } from 'react'
import axios, { Axios } from 'axios';
const Register = () => {
const [emailReg, setEmailReg] = useState("");
const [usernameReg, setUsernameReg] = useState("");
const [passwordReg, setPasswordReg] = useState("");
const register = () => {
Axios.post('http://localhost:5000/register', {
email: emailReg,
username: usernameReg,
password: passwordReg,
}).catch(function (error) {
console.log(error);
});
};
return (
<div className='background-image'>
<div className='back-button'>
<Link to='/'>
<IoMdArrowRoundBack id='back-arrow' />
<h3>Home</h3>
</Link>
</div>
<div className="container-wrapper">
<div className="container">
<h1>Create Account</h1>
<div className="wrapper">
<form>
<div className="textarea" id="email">
<input
type="email"
onChange={(e) => {
setEmailReg(e.target.value);
}}
name="email"
id="authentactor-email"
placeholder="Email"
defaultValue=""
required
/>
</div>
<div className="textarea" id="username">
<input
type="text"
onChange={(e) => {
setUsernameReg(e.target.value);
}}
name="name"
id="authentactor-text"
placeholder="Username"
defaultValue=""
required
/>
</div>
<div className="textarea" id="password">
<input
type="password"
onChange={(e) => {
setPasswordReg(e.target.value);
}}
name="password"
id="authentactor-password"
placeholder="Password"
defaultValue=""
required
/>
</div>
<div id="button-wrapper">
<button id="button" onClick={register}>Create Account</button>
</div>
</form>
<div className='bottom-text-wrapper'>
<h4>Already have an account? <Link to='/login'>Login Here</Link></h4>
</div>
</div>
</div>
</div>
</div>
)
}
export default Register
According to HTML Living Standard
The missing value default and invalid value default are the Submit Button state.
You can find more information on this question but basically adding type="button" to your Create Account button should do the job.
(so something like <button id="button" type="button" onClick={register}>Create Account</button>)
I figured it out for some reason I can't have the "name" tag in my input fields like it is below.
<div className="textarea" id="password">
<input
type="password"
onChange={(e) => {
setPasswordReg(e.target.value);
}}
name="password"
id="authentactor-password"
placeholder="Password"
defaultValue=""
required
/>
</div>
<div id="button-wrapper">
<button onClick={register} id="button">Create Account</button>
</div>
As soon as I removed the "name" tags I was able to POST my form to the backend and I only get a question mark in my url now instead of all the form data. To fix the question mark I had to set button type="button".
correct code below.
<div className="textarea" id="password">
<input
type="password"
onChange={(e) => {
setPasswordReg(e.target.value);
}}
id="authentactor-password"
placeholder="Password"
defaultValue=""
required
/>
</div>
<div id="button-wrapper">
<button type="button" onClick={register} id="button">Create Account</button>
</div>
I'm new to web development in general but I'm trying to create my own Contact page on my website and I'm having trouble. I'm using React, Gatsby, and Emailjs. I have my form set up so that the inputs are passed into the state onChange. Then I have a "send message" button that should send an email using EmailJS using the tokens and the state vars. This does all work and the email sends successfully, but it's sending dozens of emails. I believe what's happening is it's calling sendEmail every time the state is set and the DOM re-renders, or basically once for each character that's input into the fields, but I don't know why.
Bonus points if you can help me figure out why pressing the send message button also sends me to a 404 /# route on my site.
import React from 'react'
import emailjs from 'emailjs-com
class Main extends React.Component {
constructor(){
super()
this.state = {
fromName:'',
message:'',
fromEmail:''
}
}
render() {
return (
<div ...
>
...
<article>
...
<form method="post" action="#">
<div className="field half first">
<label htmlFor="name">Name</label>
<input type="text" name="name" id="name" value={this.state.fromName} onChange={e => this.setState({fromName: e.target.value})}/>
</div>
<div className="field half">
<label htmlFor="email">Email</label>
<input type="text" name="email" id="email" value={this.state.fromEmail} onChange={e => this.setState({fromEmail: e.target.value})}/>
</div>
<div className="field">
<label htmlFor="message">Message</label>
<textarea name="message" id="message" rows="4" value={this.state.message} onChange={e => this.setState({message: e.target.value})}
placeholder = "..."></textarea>
</div>
<ul className="actions">
<li>
<input type="submit" value="Send Message" className="special" onClick={this.sendEmail()}/>
</li>
</ul>
</form>
</article>
</div>
)
}
sendEmail() {
const serviceId='...'
const templateId='...'
const userId='...'
emailjs.send(serviceId, templateId, this.state, userId)
}
}
export default Main
The issue is that you never followed the emailjs documentation well and you never prevented the default form action.
According to the emailjs documentation you should have set the onClick function with the send email function (without invoking it) on the form's opening tag NOT on your submit button. (but the button is still necessary so that it can send the sign that the form needs to be submitted). You also invoked the sendEmail function which is inappropriate and leads to problems.
You must also add event as a parameter in your sendEmail function when creating this function. Then inside the sendEmail function call the event.preventDefault() function .
import React from 'react'
import emailjs from 'emailjs-com
class Main extends React.Component {
constructor(){
super()
this.state = {
fromName:'',
message:'',
fromEmail:''
}
}
render() {
return (
<div>
<article>
<form method="post" onClick={this.sendEmail} action="#">
<div className="field half first">
<label htmlFor="name">Name</label>
<input type="text" name="name" id="name" value={this.state.fromName} onChange={e => this.setState({fromName: e.target.value})}/>
</div>
<div className="field half">
<label htmlFor="email">Email</label>
<input type="text" name="email" id="email" value={this.state.fromEmail} onChange={e => this.setState({fromEmail: e.target.value})}/>
</div>
<div className="field">
<label htmlFor="message">Message</label>
<textarea name="message" id="message" rows="4" value={this.state.message} onChange={e => this.setState({message: e.target.value})}
placeholder = "..."></textarea>
</div>
<ul className="actions">
<li>
<input type="submit" value="Send Message" className="special"/>
</li>
</ul>
</form>
</article>
</div>
)
}
sendEmail(event) {
event.preventDefault();
const serviceId='...'
const templateId='...'
const userId='...'
emailjs.send(serviceId, templateId, this.state, userId)
.then((result) => {
console.log(result.text);
}, (error) => {
console.log(error.text);
});
}
}
export default Main
I am creating a menu planner and and started with basic form. I want to be able to enter an entre. If set entre has free of certain diets. I want to click on a checkbox, to switch to true. So I can save the state and render to the screen.
I tried different approaches and googled a lot but can't find anything that really works for me. I can get the checkboxes to switch to true, but it doesn't save the value changes to undefined. Or I had it work once, but it checked all the other checkboxes in the side object. Not what i want.
const ServiceForm = () => {
const service = {
entre:{
value:"",
veg:false,
glut:false,
dairy:false
},
side:{
value:"",
veg:false,
glut:false,
dairy:false
}
}
const [state, dispatch] = useReducer(reducer, service)
console.log(state)
return (
<div>
<form className="form">
<div className="meal-container">
<div className="entre-form">
<input
type="text"
name="entre.value"
onChange={(event) => {
dispatch({ type: "ENTRE", payload: event.target.value });
}}
className="entree"
placeholder="entree"
/>
<div className="diets">
<input
onChange={() => {
dispatch({ type: "ENTRE", veg: !state.entre.veg });
}}
checked={state.entre.veg}
type="checkbox"
/>
<label>Veg</label>
<input type="checkbox" />
<label>Gluten</label>
<input type="checkbox" />
<label>Dairy</label>
</div>
</div>
<div className="entre-form">
<input type="text" name="sideOne" placeholder="Side One" />
<div className="diets">
<input
onChange={() => {
dispatch({ type: "VEG", payload: !state.vegetarian });
}}
checked={state.vegetarian}
type="checkbox"
/>
<label>Veg</label>
<input type="checkbox" />
<label>Gluten</label>
<input type="checkbox" />
<label>Dairy</label>
</div>
</div>
<div className="entre-form">
<input name="entre.value" placeholder="Side Two" />
<div className="diets">
<input type="checkbox" />
<label>Veg</label>
<input type="checkbox" />
<label>Gluten</label>
<input type="checkbox" />
<label>Dairy</label>
</div>
</div>
<div className="entre-form">
<textarea
name="description"
className="description"
placeholder="description"
/>
</div>
</div>
</form>
</div>
);
};
export default ServiceForm;
My reducer function
export const reducer = (state, action) =>{
switch(action.type){
case 'ENTRE':return{
...state,
entre:{
value:action.payload,
veg:action.veg
}
}
}
}
You reducer should be. I will also suggest you have separate actions for text input and checkbox.
switch(action.type){
case 'ENTRE':return{
...state,
entre:{
...entre,
value:action.payload,
veg:action.veg
}
}
}
}
Ok so I am making a "buzzfeed" quiz generator and I am having an issue with a piece of my form. So for each question made there are two different parts, a "Question" and the "Answers". There will always be 4 answers but I want to keep track of which Answers are checked later so I would like to give each answer a unique id "question" + questionNum + "Answer" + answerNum or "question" + questionNum + "Answer" + i So I made this answersGenerator function that is supposed to give me 4 unique answer choice fill ins for the user to input answers for that specific questions (right now it says something about terms and conditions - ignore that I ad just left it like that for now because I was following a tutorial). Here is all my code:
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import logo from './logo.svg';
import './App.css';
var questionNum = 1;
var answerNum = 1;
class App extends Component {
constructor(props) {
super(props);
this.state = {
quizTitle: "",
author: "",
question: "",
terms: false,
test: "",
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
const target = event.target;
const value = target.type === "checkbox" ? target.checked : target.value;
const name = target.name;
this.setState({
[name]: value
});
}
handleSubmit(event) {
event.preventDefault();
console.log(this.state);
}
render() {
return (
<div className="App">
<div>
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
<div className="container">
<div className="columns">
<div className="formDiv">
<form className="form" onSubmit={this.handleSubmit}>
<div className="field">
<label className="label">Give your quiz a title.</label>
<div className="control">
<input
className="input"
type="text"
name="quizTitle"
value={this.state.quizTitle}
onChange={this.handleChange}
/>
</div>
</div>
<div className="field">
<label className="label">Who's the Author?</label>
<div className="control">
<input
className="input"
type="text"
name="author"
value={this.state.author}
onChange={this.handleChange}
/>
</div>
</div>
<div className="questions" id="questions">
<div className="question" id={'questionGroup' + questionNum}>
<div className="field">
<label className="label" id={'question' + questionNum}>Question {questionNum}</label>
<div className="control">
<input
className="input"
type="text"
name='question'
value={this.state.question}
onChange={this.handleChange}
/>
</div>
</div>
<div className="answersDiv">
<label className="label">Answers</label>
<div className="field">
<div className="control">
<label className="checkbox">
{this.answersGenerator()}
</label>
</div>
</div>
</div>
</div>
</div>
<div className="field">
<div className="endButtons">
<button id="addQuestionButton"
onClick={addQuestion}>Add Question</button>
<input
type="submit"
value="Submit"
id="submitButton"
className="button is-primary"
/>
</div>
</div>
</form>
</div>
<div className="column is-3">
<pre>
<code>
<p>Quiz Title: {this.state.quizTitle}</p>
<p>Author: {this.state.author}</p>
<p>Question: {this.state.question}</p>
<p>Terms and Condition: {this.state.terms}</p>
<p>Do you test?: {this.state.test}</p>
</code>
</pre>
</div>
</div>
</div>
</div>
);
}
}
function answersGenerator () {
console.log("hello this is answer generator");
var div = document.createElement('div');
div.className = 'answers' + {questionNum};
for (var i = 1; i < 5; i++){
div.innerHTML =
'<div className="field">\
<div className="control">\
<label className="checkbox">\
<label className="label">Answers</label>\
<input\
name="terms"\
type="checkbox"\
id="question'+{questionNum}+'Answer'+{i}+'"\
checked={this.state.terms}\
onChange={this.handleChange}\
/>\
I agree to the{" "}\
terms and conditions\
</label>\
</div>';
document.getElementsByClassName('answersDiv')[0].appendChild(div)
}
}
function addQuestion () {
questionNum++;
console.log(questionNum + "that is the question number");
var div = document.createElement('div');
div.className = "questions" + questionNum;
div.innerHTML =
'<div id="questionGroup'+{questionNum}+'">\
Question '+{questionNum}+'<br />\
<input type="text" name="question'+{questionNum}+'"/><br />\
Answers<br />\
Check the box(es) for the correct answer(s).<br />\
<input type="checkbox" name="question'+{questionNum}+'Answer1Box" />\
<label for="question'+{questionNum}+'Answer1"><input type="text" name="question'+{questionNum}+'Answer1"/></label><br />\
<input type="checkbox" name="question'+{questionNum}+'Answer2Box" id= />\
<label for="question'+{questionNum}+'Answer2"><input type="text" name="question'+{questionNum}+'Answer2"/></label><br />\
<input type="checkbox" name="question'+{questionNum}+'Answer3Box" />\
<label for="question'+{questionNum}+'Answer3"><input type="text" name="question'+{questionNum}+'Answer3"/></label><br />\
<input type="checkbox" name="question'+{questionNum}+'Answer4Box" />\
<label for="question'+{questionNum}+'Answer4"><input type="text" name="question'+{questionNum}+'Answer4"/></label><br />\
</div>';
document.getElementsByClassName('questions')[0].appendChild(div)
}
export default App;
There's a few things to just ignore in here, i just wasn't sure how much info you needed. So the issue is that I get an error when I call my answersGenerator function in my render function. Here's the error Uncaught TypeError: this.answersGenerator is not a function Here's the small piece where that is
<div className="answersDiv">
<label className="label">Answers</label>
<div className="field">
<div className="control">
<label className="checkbox">
{this.answersGenerator()}
</label>
</div>
</div>
</div>
I appreciate the help, if you have any other tips for me other than this issue I am having I am all ears. I am very new at this, being js and React.
UPDATE: I have edited the answersDiv to be just this (I relized it was being called inside a checkbox)
<div className="answersDiv">
<label className="label">Answers</label>
{answersGenerator()}
</div>
I am still getting the same errors though.
You're receiving the error because the answersGenerator() isn't a method of your class App, so, you can't refer to it using this. If you want to do on that way, move you function to inside the component, like this:
class App extends Component {
// your component definition etc..
answersGenerator = () => {
// your function implementation
}
// the rest of your component
}
TIP:
If you dont want to have to always bind the function, like:
this.handleChange = this.handleChange.bind(this);
Declare your method like:
handleChange = (event) => { // the implementation }
Instead of
handleChange(event) { // the implementation }
The () => {}, known as arrow function, does the bind for your.
EDIT
You're developing with React, that supports creating HTML inside your code. So, you can create an array of answers, then, return a div with the answers mapped inside. The map will take each answer and render inside the div. Try to define your method as below:
answersGenerator => () {
console.log("hello this is answer generator");
var answers = []
for (var i = 1; i < 5; i++){
answers.push(
<div className="field">
<div className="control">
<label className="checkbox">
<label className="label">Answers</label>
<input
name="terms"
type="checkbox"
id=`question${questionNum}Answer${i}`
checked={this.state.terms}
onChange={this.handleChange}
/>
I agree to the{" "}
terms and conditions
</label>
</div>
);
}
return <div className=`answer${questionNum}`> {answers.map(answer => answer)} </div>
}
At first glance it looks like you haven't defined your answersGenerator() function within your App class.
Thus, this.answersGenerator() doesn't exist.
Try just using answersGenerator() without the this.
I've something weird going on here with Angular.
I have a details view with an edit button. When I press the edit button, I pass the object to the edit view. On the edit form there are a few dropdown boxes. The first time I click the edit button, everything loads well. All the dropdowns has the correct value selected. When I press cancel on the edit form, I get back to the details view. When I do nothing and press the Edit button again on the details view, the dropdowns don't have selected values at all! However the dropdowns do have items.
How is this possible? I didn't do anything with the data!
The details view and edit view are both directives:
In the template of customerDetails:
<div>
Here all the details of the customer
<button ng-click="ShowCustomerEditForm()">Edit</button>
</div>
<customer-edit
visible="showCustomerForm"
customer = "customer">
</customer-edit>
directive customer-edit:
app.directive("customerEdit", function (CustomerService, CountryService) {
return {
restrict: 'E',
templateUrl: '/Customer/Add',
scope: {
customer: '=',
visible: '=',
onCustomerSaved: '&'
},
link: function (scope, element, attributes) {
CustomerService.getAllAcademicDegrees().then(function (response) {
scope.academicDegrees = response;
});
CustomerService.getAllGenders().then(function (response) {
scope.genders = response;
});
CountryService.getAllCountries().then(function (response) {
scope.countries = response;
});
scope.$watch('customer', function (newValue) {
if (newValue && newValue.Id > 0) {
scope.customer.originalCustomer = {};
angular.copy(scope.customer, scope.customer.originalCustomer);
}
});
scope.customerFormSubmit = function () {
if (scope.customer.Id > 0) {
editCustomer();
}
else {
addCustomer();
}
}
scope.hideCustomerForm = function (restoreOriginal) {
if (restoreOriginal) {
angular.copy(scope.customer.originalCustomer, scope.customer);
}
scope.visible = false;
}
// Private functions
function editCustomer() {
var editCustomer = createCustomer(scope.customer);
editCustomer.Id = scope.customer.Id;
CustomerService.editCustomer(editCustomer).then(editCustomerSucceeded);
scope.hideCustomerForm(false);
}
function editCustomerSucceeded(response) {
var uneditedCustomer = _.findWhere(scope.customers, { Id: response.Id });
angular.copy(response, uneditedCustomer);
}
function addCustomer() {
var newCustomer = createCustomer(scope.customer);
CustomerService.addCustomer(newCustomer).then(function (response) {
scope.onCustomerSaved({ customer: response });
scope.hideCustomerForm(false);
});
}
}
}
});
I am trying to fix this for 6 hours now and I just don't understand it and I'm getting very desperate.. I just don't know how to fix this and what's causing this. I really hope someone can help me..
edit:
The customer edit html:
<div class="add-edit-container">
<div class="titleBox">
{{ customerFormData.title }}
<span class="close" title="Annuleren en sluiten" ng-click="hideCustomerForm(true)">×</span>
</div>
<div class="border">
<form id="frmAddCustomer" name="form" novalidate data-ng-submit="customerFormSubmit()">
<div>
<fieldset>
<legend>Identificatie</legend>
<label>Code:</label>
<input type="text" data-ng-model="customer.Code" />
<label>Geslacht:</label>
<label style="float: left;margin-right: 3px;" data-ng-repeat="gender in genders" data-ng-hide="$first">
<input type="radio" name="gender" data-ng-value="gender" data-ng-model="customer.Gender" />{{gender.Description}}
</label>
<div class="clear-float"/>
<label>Titel:</label>
<select data-ng-model="customer.AcademicDegree" data-ng-options="degree.Description for degree in academicDegrees"></select>
<label>Initialen:</label>
<input type="text" required data-ng-model="customer.Initials" />
<label>Voornaam: </label>
<input type="text" required data-ng-model="customer.FirstName" />
<label>Tussenvoegsel:</label>
<input type="text" data-ng-model="customer.MiddleName" />
<label>Achternaam:</label>
<input type="text" required data-ng-model="customer.LastName" />
<label>Geboortedatum:</label>
<input type="text" datepicker="01-01-1950" required data-ng-model="customer.BirthDate" />
<label>BSN:</label>
<input type="text" required data-ng-model="customer.BSNNo" />
<label>Identificatienummer:</label>
<input type="text" required data-ng-model="customer.IdCardNo" />
</fieldset>
<fieldset>
<legend>Contact</legend>
<label>Straat:</label>
<input type="text" required data-ng-model="customer.Street" />
<label>Huisnummer + toevoeging:</label>
<input type="text" required data-ng-model="customer.HouseNumber" style="width: 50px"/>
<input type="text" data-ng-model="customer.HouseNumberAddition" style="width: 50px"/>
<label>Postcode:</label>
<input type="text" required data-ng-model="customer.ZipCode" />
<label>Woonplaats:</label>
<input type="text" required data-ng-model="customer.City" />
<label>Telefoonnummer overdag:</label>
<input type="text" required data-ng-model="customer.DayPhone" />
<label>Telefoon anders:</label>
<input type="text" data-ng-model="customer.PhoneOther" />
<label>E-mailadres:</label>
<input type="email" required data-ng-model="customer.EmailAddress" />
<label>Bedrijfsnaam:</label>
<input type="text" data-ng-model="customer.CompanyName" />
<label>Land:</label>
<select data-ng-model="customer.Country" data-ng-options="country.Description for country in countries"></select>
</fieldset>
<fieldset>
<legend>Afwijkend postadres</legend>
<label>Straat:</label>
<input type="text" data-ng-model="customer.OtherStreet" placeholder="leeg indien niet van toepassing" />
<label>Huisnummer + toevoeging:</label>
<input type="text" data-ng-model="customer.OtherHouseNumber" style="width: 50px"/>
<input type="text" data-ng-model="customer.OtherHouseNumberAddition" style="width: 50px"/>
<label>Postcode:</label>
<input type="text" data-ng-model="customer.OtherZipCode" placeholder="leeg indien niet van toepassing" />
<label>Woonplaats:</label>
<input type="text" data-ng-model="customer.OtherCity" placeholder="leeg indien niet van toepassing" />
<input type="hidden" data-ng-model="customer.OtherAddressId" />
</fieldset>
</div>
<div class="button-box">
<input type="submit" value="Opslaan" class="button" />
Annuleren
</div>
</form>
</div>
</div>
I can answer why this problem is happening.
The problem is:
angular.copy(scope.customer.originalCustomer, scope.customer);
angular.copy does a deep copy. After the above call, scope.customer.Country, for instance, is a brand new object, it's not an element of scope.countries anymore. Therefore, the select directives lost track of the selected values.