So I'm trying to implement the following form in my app.
This is a form which should appear the first time a user tries to create a task in our app. Now my question is, what is the best way to deal with something like this? I'm not a very good frontend-guy and this might be a trivial question, I'm sorry if it is - nevertheless, I don't know the answer to it.
I'm not that curious about components etc, those are ok but rather of the flow. How should the things be organized in the html/js. Do I create a separate button each time, should the elements be dynamically inserted somehow.. etc
Any help would be awesome, thanks!
You could use angular directives for this, dynamically showing them based on other values. This should get you in the right direction:
<label for="taskName">Task name:</label>
<input type="text" name="taskName"
ng-model="task.name" />
<div ng-show="currentStep > 1">
<label for="assigned">Assigned:</label>
<select>
<!-- options etc. -->
</select>
</div>
<div>
<button class="btn btn-default"
ng-click="nextStep()">{{ currentStep.nextText }}</button>
</div>
controller:
.controller("MyCtrl",
["$scope", function($scope) {
$scope.steps = [
{ number: 1, nextText: "Let's go!" },
{ number: 2, nextText: "Next, please" }
];
$scope.task = {};
$scope.currentIndex = 0;
$scope.currentStep = $scope.steps[$scope.currentIndex];
$scope.nextStep = function (){
$scope.currentIndex += 1;
$scope.currentStep = $scope.steps[$scope.currentIndex];
}
}]);
Angular has a built in directive for this kind of process, ngSwitch. Using it, you can define a series of steps, and change the display based on the value of the step you are on in the process.
<form ng-switch="wizardStep">
<div ng-switch-when="Step1">This is Step 1</div>
<div ng-switch-when="Step2">This is Step 2</div>
</form>
Related
So this is my first question. I'm very new to coding, and only have done a few basic programs, so please don't judge me if the answer is obvious. Me and my friend have worked together to create a chat app. We are currently making a password for the program because right now, anyone with the url can join. I am already aware of <input type="password> and I have made a little program using it, but what I want to do is to make this code more secure/make other code appear and the button and password disappear. (This is the program I was talking about)
<!DOCTYPE html>
<html>
<body>
<script>
function pswChecker(){
var psw = document.getElementById("psw").value;
if(psw == "password") {
alert("Code goes here.");
} else {
window.close();
}
}
</script>
<div class="fadeMe">
<div>
<div style="color=white;">What is the password?</div>
<input type="text" id="psw" name="psw">
<input type="button" value="Submit" id="submit" onClick="pswChecker()">
</div>
</body>
</html>
Keeping your password inside of HTML source is not secure and everyone who can access your website can see the password. Since you are working on a chat application I assume you have some sort of a server - you will have to perform checks on the back end.
To hide an element you can add an ID to it and use the following code:
const passwordDiv = document.getElementById("password");
const hideButton = document.getElementById("hide");
hideButton.addEventListener("click", function () {
passwordDiv.style.display = 'none';
});
<div id="password">
The password form goes here.
<button id="hide">Hide</button>
</div>
If you want to show something else you can use the same code but set the display to block instead.
To add a style which is what I think you want you can do something like this.
document.getElementsByClassName("fadeMe").style.display = "none";
I have to work in a Form with Angular 2, i need a html select but doesn't work i don't find help neither from Angular 2 Documentation, indeed live examples provided doesn't work (i mean HERO FORM).
Hero Form Live Example
I don't need get A new selection just I need it works as is shown in Doc. by Angular 2 inside a Form.
Someone Knows what happens about it?.
I solved it ,I hope works for everyone, if you read , you understand. Thanks StackOverflow , for let help us.
HTML
<div class="form-group">
<label for="ReclaimType">Choose Reclaim Type</label>
<div class="input-group">
<select (change)="getReclaimType($event)" [(ngModel)]="reclaimType" ngControl="reclaimType" class="form-control">
<option *ngFor="#reclaimType of reclaim.choiceType"
[value]="reclaimType">{{reclaimType}}</option>
</select>
<span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
</div>
</div>
Typescript code
reclaimType: string = '';
getReclaimType(event: any) {
this.reclaimType = event.target.value;
}
private reclaim: any = {
choiceType: ['Choose...', 'Aguas Servidas', 'Baldio Abierto', 'Residuos Varios', 'Veredas Rotas']
};
I am still new towards AngularJS, I made a simple textarea to handle user input using angular model binding like below code (noted that my ng-app and ng-controller are being injected somewhere else but it is within the entire <div></div>):
HTML:
<div ng-controller="StatusCtrl">
//some other HTML
<div class="sPTabs-holder">
<tabset>
<tab heading="Status">
<div>
<form class="statusPost" enctype="multipart/form-data">
<div class="form-group no-margin">
<div class="col-md-12 col-sm-12 no-pad">
<textarea type="text" ng-model="inputStatus" class="statusPostBox" placeholder="what's new on your mind?"></textarea>
</div>
</div>
<div class="form-group no-margin">
<div class="col-md-12 col-sm-12 no-pad">
<button style="width: 12%;" ng-click="postStatus()" class="btn btn-primary btn-sm" type="button">Share</button>
</div>
</div>
</form>
</div>
</tab>
<tab heading="Image">Image</tab>
</tabset>
</div>
</div>
JS:
'use strict';
var Status = angular.module('Status',['ui.bootstrap','ngResource','ngSanitize'])
Status.controller('StatusCtrl', ['StatusService','$resource','$scope','$http', '$timeout', '$sce',
function StatusCtrl(StatusService, $resource, $scope, $http, $timeout, $sce) {
//Usable models
$scope.inputStatus;
//Html-bind
$scope.makeTrust = function(html){
return $sce.trustAsHtml(html);
}
$scope.postStatus = function(){
if ($scope.inputStatus == null){
console.log('Blank post alert');
alert('You cannot post with blank statuses!');
}else{
console.log($scope.inputStatus);
}
}
}]);
My problem is whenever I click on the submit button angular will always pop me with the empty input error even though I have input in the textarea. At first I thought that I made a mistake in my model binding so I have tried out to echo the value in html using {{inputStatus}}, things appeared as it was typed and also when I try to define a default value in $scope.inputStatus = 'default value', the console does indeed echoed 'default value', but the problem is it doesn't store anything that is being typed in the form. What have i done wrong in my code?
Noted that I am not so familiar on how to setup AngularJS in JSFiddle. I apologize in advance if you would like to see the working demo.
**Update 1 - I have narrow down the problem, apparently the problem only occur when I am using angular tabs by Angular Bootstrap. So what happen is if you revise the HTML code, there is this <tabset> section. When declaring the ng-controller after the <tabset> section and everything works like a charm but if you declare it before the <tabset> section, that is where everything mess up.
You should initialize $scope.inputStatus in your controller, otherwise it will pop out an alert windows if you haven't input anything in the textarea (which will initialize or update $scope.inputStatus).
So you change your controller to
$scope.inputStatus = "";
Then everything will work, here is a working demo.
update
If you are using <tabset>, then you are facing child scope problem. <tabset> will create a child scope inside your controller, which means, the scope bind to tabset is the child of scope bind to StatusCtrl.
There are two ways to fix this problem. The first one is accessing the parent scope directly by changing your ngModel to below
<textarea type="text" ng-model="$parent.inputStatus" class="statusPostBox" placeholder="what's new on your mind?"></textarea>
The second one is easier but may looks like a trick, use Dot notation like #lcycook mentioned. In your controller StatusCtrl, declare a dictionary called data
$scope.data = {
inputStatus: ""
};
Then you can access the inputStatus by data.inputStatus anywhere inside the controller scope and you don't need to care about the child scope.
While there is no direct evidence, I suspect your text area is masked inside a child scope. This is common for new AngularJS developers.
While you are learning which directive creates a child scope (e.g. ng-if, ng-repeat), you can avoid this problem with "Dot notation". Which is, wrapping the model inside an object.
You can do this by initializing your ng-model or at least the wrapper object in your controller.
$scope.data = {};
// OR
$scope.data = {inputStatus=''};
Then in your template
<textarea type="text" ng-model="data.inputStatus" class="statusPostBox" placeholder="what's new on your mind?"></textarea>
Process it in your controller by referring it as $scope.data.inputStatus.
Some people even argue you are doing it wrong if you don't do this for any ng-model, but I find thinking wrapper object name is hard so I still use "dotless" one if I know the there is no child scope.
I get duplicate ids when I set the views like so in my render function
var template = _.template($("#user-login-template").html(), {});
this.$el.html(template);
The html looks like this after running the render function, before runing the render function. Beforehand, the <div class ="app"> is empty (as it should be). It copy pasted the code from template and therefore the ids into the div.
<div class="app">
<input type="text" id="signup-username" placeholder="Username"/>
<input type="password" id="signup-password" placeholder="Create a Password"/>
<button id="signUpBtn">Sign Up</button>
<button id="logInBtn">Login</button>
</div>
<!-- Templates -->
<!-- Login Template -->
<script type="text/template" id="user-login-template">
<input type="text" id="signup-username" placeholder="Username"/>
<input type="password" id="signup-password" placeholder="Create a Password"/>
<button id="signUpBtn">Sign Up</button>
<button id="logInBtn">Login</button>
</script>
For reference, this is what my whole view looks like
var LogInView = Parse.View.extend({
el: '.app',
events: {
"click .signUpBtn": "signUp",
"click .logInBtn": "logIn"
},
initialize: function (){
this.render()
},
logIn: function () {
//To Do
},
render: function () {
var template = _.template($("#user-login-template").html(), {});
this.$el.html(template);
}
});
If Webstorm is complaining about the ids inside the <script> then it is wrong and you have three options:
Get a new IDE that has a better understanding of HTML.
Figure out how to reconfigure Webstorm to know what HTML really is. There must be a way to beat some sense into Webstorm, this sort of thing is very common these days.
Ignore the warnings (yuck).
Things inside <script> are not HTML and are not part of the DOM. Ask the browser what $('input[type=text]').length is after your template is rendered and you'll get 1 since the
<input type="text" id="signup-username" placeholder="Username"/>
inside the <script> isn't HTML, it is just text. You can even check the HTML specification of <script>:
Permitted contents
Non-replaceable character data
Non-replaceable character data is not HTML, it is just text.
I'm having trouble with what I though would be a rather pedestrian use case. Given the following form
<form class="form-inline" role="form">
<div class="form-group">
<input type="text" ng-model="customerInput" size="80" class="form-control" placeholder="Type the company name here"/>
<button class="btn btn-primary" ng-click="addCustomer(customerInput)">Add</button>
</div>
</form>
I simply want to clear the input field after adding the customer.
$scope.addCustomer = function(customer) {
$scope.customers.push({name: customer});
$scope.customerInput = '';
}
It doesn't work, so I inspected the $scope. The customerInput value I'm looking for lives in the $scope.$$childHead. This works.
$scope.addCustomer = function(customer) {
$scope.customers.push({name: customer});
$scope.$$childHead.customerInput = '';
}
I'm clearly doing something wrong. Can someone shed some light?
Angular $scopes often do things that you don't expect because of the inheritance chain. For this reason, it's useful to define a Plain Old JavaScript var and reference that within the scope:
angular.module('myApp').controller(function ($scope) {
var model = {
customerInput: ''
};
$scope.model = model;
});
And then in your template: <input ng-model="model.customerInput" />. Now you can operate on the model var in functions of that $scope, and be confident that only your chosen $scope is operating on that model. Of course, as you get more familiar with $scope inheritance patterns, you'll often want the implicit sharing between Controllers. And of course, in such a case, you could also store the data on a service.