I have the following html. I want to add ace.js editor in my code and map the value in the Editor to answer field of the a form
<div class="form-group" id="answer-div">
<div class="label-div">
<label class="control-label"><strong>Answer</strong></label>
</div>
<div id="add-more-answer-div" class="two-column-grid">
<div id="answer-filename-div">
<label id="filename-label" for="answer-filename">Name</label>
<input type="text" id="answer-filename">
<button type="button" id="more-answer-button" class="unselected-button">Add More Sections</button>
</div>
</div>
<div class="control-div" id="editor-div">
<div id="editor" class="form-control" formControlName="answer" [ngClass]="validateField('answer')">Remove this and enter code here</div>
<app-show-errors [control]="practiceQuestionForm.controls.answer"></app-show-errors>
</div>
</div>
The corresponding form is
this.practiceQuestionForm = this.fb.group({
...
answer:[null,Validators.required],
....
})
When I run the code, I get the error Error: No value accessor for form control with name: 'answer' corresponding to html code <div id="editor" class="form-control" formControlName="answer" [ngClass]="validateField('answer')">Remove this and enter code here</div>
What am I doing wrong?
Related
Is it possible to add dynamic text in the ng-model name?
data js
self.Map = [{ Id: 0, Name: 'Map1' }, { Id: 1, Name: 'Map2' }, { Id: 2, Name: 'Map3' }]
html
<div ng-repeat="option in mainCtrl.Map">
<div style="text-align:left;" class="col-md-6">
{{option.Name}} Map
</div>
<div style="text-align:right;" class="col-md-6">
<input type="text" id="Is{{option.Name}}" name="Is{{option.Name}}" ng-model="mainCtrl.Is{{option.Name}}"/>
</div>
</div>
desired output
ng-model="mainCtrl.IsMap1"
Refer to https://www.w3schools.com/js/js_objects.asp, you can access object in these 2 way:
objectName.propertyName
objectName["propertyName"]
You may try following way such that angularJs can bind the value you want:
<input type="text" id="Is{{option.Name}}" name="Is{{option.Name}}" ng-model="mainCtrl['Is'+option.Name]"/
Have you tried to add dummy field to your HTML input tag like
<div ng-repeat="option in mainCtrl.Map">
<div style="text-align:left;" class="col-md-6">
{{option.Name}} Map
</div>
<div style="text-align:right;" class="col-md-6">
<input type="text" id="Is{{option.Name}}" name="Is{{option.Name}}" ng-model="mainCtrl[this.getAttribute('dummyfield')]" dummyfield="{{option.Name}}Role" />
</div>
</div>
Can Anyone solve this problem?pop-up message
I have this code below
<body>
<div class="contact-form-wrap responsive">
<!--- pop-up message start --->
<div class="status alert alert-success contact-status"></div>
<!--- pop-up message end --->
<form id="main-contact-form4" class="contact-form" name="contact-form" method="post" action="app.php" role="form">
<legend style="padding-bottom: 20px; color: #708090;">Please provide us your information.</legend>
<!-- Name Filed Starts -->
<div class="col-sm-6">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" class="form-control" name="name" id="name" required="required" placeholder="Full Name">
</div>
</div>
</div>
<!-- Name Filed Ends -->
<!---------------- Pop-up Message here ---------------->
<!-- Button starts -->
<div class="col-sm-12">
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block">Submit</button>
</div>
</div>
<!-- Button Ends -->
</form>
</div>
</div>
</body>
I like to move my pop-up message on the top of the button. so every time the button will press the pop-up message will notice immediately.
here is my js
$(".contact-form").submit(function() {
var rd = this;
var url = "app.php";
$.ajax({
type: "POST",
url: url,
data: $(".contact-form").serialize(),
success: function(data) {
$(rd).prev().text(data.message).fadeIn();
}
});
return false;
});
The problem with your code is that you're selecting the popup message based on it's location in the DOM. You need to select it on a proper selector instead. Since it has a class called contact-status, let's use that.
Change:
$(rd).prev().text(data.message).fadeIn();
to
$('.contact-status').text(data.message).fadeIn();
It's a bad idea to select elements from their location in the DOM since you sometimes (like now) want to move them. Using proper selectors (like id's or classes) will keep your code working regardless where in the DOM the element is.
I've been staring and toying with this html code block for a simple Angular 4 page, and no matter what I do, looking for typos and searches on the errors it keeps giving me a hard time with my closing tags.
Error Message:
Uncaught Error: Template parse errors:
Unexpected closing tag "div". It may happen when the tag has already been closed by another tag. /div> /div> [ERROR ->]/div>
<form [formGroup]="form">
<!-- OLD PASSWORD -->
<div class="form-group">
<label for="">Old Password</label>
<input formControlName="oldPassword" type="password" class="form-control">
<div
*ngIf="oldPassword.touched && oldPassword.invalid"
class="alert alert-danger">
<div *ngIf="oldPassword.errors.required">
Old password is required.
</div>
</div>
</div>
<!-- NEW PASSWORD -->
<div class="form-group">
<label for="">New Password</label>
<input formControlName="newPassword" type="password" class="form-control">
<div
*ngIf="newPassword.touched && newPassword.invalid"
class="alert alert-danger">
<div *ngIf="newPassword.errors.required">New password is required.</div>
</div>
</div>
<!-- CONFIRM PASSWORD -->
<div class="form-group">
<label for="">Confirm Password</label>
<input formControlName="confirmPassword" type="password" class="form-control">
<div
*ngIf="confirmPassword.touched && confirmPassword.invalid"
class="alert alert-danger">
<div *ngIf="confirmPassword.errors.required">Confirm password is required.</div>
</div>
</div>
<button class="btn btn-primary">Change Password</button>
</form>
[SOLVED] after pretty much turning this project upside-down and inside-out it seems my problem was that I had two components that were very similarly named:
"change-password"
and then
"change-password-reactive"
I had to removed the instance of "change-password" from my app.module.ts to get the page to load and this error to go away.
I am validating my template using angular2, but meanwhile it shows this error:
Cannot read the property 'errors' of undefined.
Here is my template:
<h3 class = "head">{{title}}</h3>
<form [ngFormModel]="form" #f="ngForm">
<div class="row">
<div class="form-group">
<label class="formHeading">Facebook</label>
<input type="text" id="facebook" class="form-control col-xs-3" ngControl="facebook" #facebook="ngForm" >
</div>
<div *ngIf ="facebook.touched && facebok.errors">
<div class="form-row btn">
<button type="submit" class="btn btn-primary pull-right butspace" [disabled]="!f.valid">Save</button>
</div>
</div>
</form>
I dont know why it shows this error. Can anyone fix it?
First of all, you have facebok instead of facebook on the error property.
If that doesn't fix it you're probably using the facebook object before it is assigned, which can happen if it's an #Input() for example.
Use the Elvis operator:
*ngIf ="facebook?.touched && facebook?.errors"
I'm using this code for a form in HTML:
<div class="login-wrapper">
<form>
<div class="popup-header">
<span class="text-semibold"><i class="fa fa-sign-in"></i> Logging in</span>
</div>
<div class="well">
<div class="form-group has-feedback">
<label>Username</label>
<input type="text" name="user" class="form-control" placeholder="e.g. andre#mail.de">
<i class="icon-users form-control-feedback"></i>
</div>
<div class="form-group has-feedback">
<label>Password</label>
<input type="password" name="password" class="form-control" placeholder="Password">
<i class="icon-lock form-control-feedback"></i>
</div>
<div class="form-group has-feedback">
<label>reCaptcha</label>
<div class="g-recaptcha" data-sitekey="..."></div>
</div>
<div class="form-actions text-right">
<input type="submit" id="loginbutton" name="loginbutton" value="Login" class="btn btn-primary">
</div>
</div>
</form>
</div>
<!-- /login wrapper -->
However, when I press the submit button, it does nothing but giving me a very strange url in my browser's address bar:
http://localhost/?user=&password=&g-recaptcha-response=&loginbutton=Login
Whenever I fill out fields, it kind of puts the content into the URL:
http://localhost/?user=peter%40griffin.com&password=somepass&g-recaptcha-response=&loginbutton=Login
The intended PHP code which should be run when pressing the button won't even run or load, since this HTML stuff apparently screws things up. I don't know what I have done the wrong way. Any suggestions?
In order for the form to submit somewhere else, you need to set the form elements action parameter.
<form action="some_file.php">
Alternatively, you can take the query string and append it directly to the file path to test your script.
http://localhost/some_file.php?user=peter%40griffin.com&password=somepass&g-recaptcha-response=&loginbutton=Login
Inside of some_file.php, you would then pull out each of the variables like
$user = $_GET['user'];
$password = $_GET['password'];
The very strange url is actually the result of a GET request.
The parameters are separated by an & so you have:
user=peter%40griffin.com&password=somepass&g-recaptcha-response=
"User" is the attribute name of your input and "peter%40griffin.com" is the value
First you need to send your form to an action using the attribute action="save.php", for example an pass the parameters using the method="POST", so the user can't see the values in the URL.
<form action="save.php" method="post">