I am looking for some guidance.
Here is some code I have:
<div ng-repeat="q in questions">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title"><span ng-bind="q.questionText"></span></h3>
</div>
<div class="panel-body">
<answer-field question="q"></answer-field>
</div>
</div>
</div>
answer-field is a directive, and essentially depending on what q is a certain type of form field will be displayed like a select box or an input text box, etc.
For example, the select box might be:
<div class='form-group'>
<select class='form-control' ng-model='question.answer' ng-options='item for item in question.choices' required>
<option value=''>Select an option...</option>
</select>
</div>
And the text field might be:
<div class='form-group'>
<input class='form-control' type='text' ng-model='question.answer' required />
</div>
As you can see, I have added required and this does technically work. The browser will show an error saying I need to fill out that field if I try to submit.
What I would like though is something a little more aesthetically pleasing. Bootstrap has has-error for example. It would be nice if instead of the default browser "fill out this field" message if I could make the form-group display has-error - and ideally display somewhere a list of the items that do indeed have an error.
How can I go about this?
Angular has novalidate. It suppresses the native HTML validation, allowing you to put in your own. As for how to show custom errors, it's also in that page.
I often like to display custom error messages as follows:
<div class="form-group">
<label for="inputPassword" class="control-label">Password</label>
<input type="password" id="inputPassword" name="password" class="form-control" ng-model="user.password" placeholder="Password" required>
</div>
<div class="form-group has-error">
<p class="help-block" ng-show="form.password.$error.required && submitted">
Please enter password.
</p>
</div>
or you can use ng-class to append the has-error class to the first div based on the expression
Related
I'm playing around with template reference variables. And thought of using its value to set the disabled property on a button. i.e disable a button unless the input field is non-empty. I expected the following code to work but the button stays disabled even after some value is entered in the input.
Why does Angular change detection not work in this case?
Is there another way to do achieve this using ONLY template reference variables?
The code is written in Angular 8 and node 12.16.2
<div class="form-group col-md-6">
<input #hello type="text" class="form-control" id="01">
</div>
<div class="form-group col-md-6">
<button class="btn btn-primary" [disabled]="hello.value.length === 0">Deactivate</button>
</div>
You can try ngForm combined with ngModel directive to achieve this,
<form #testForm="ngForm">
<div class="form-group col-md-6">
<input type="text" name="hello" ngModel class="form-control" id="01">
</div>
<div class="form-group col-md-6">
<button class="btn btn-primary" [disabled]="testForm.value.hello.length === 0">
Deactivate
</button>
</div>
</form>
{{testForm.value|json}}
Demo : https://stackblitz.com/edit/angular-ivy-xtdm4k?file=src/app/app.component.html
For more details, see this.
I am new to Vuejs and currently I wanted to show the the detail page view when I clicked on input field
<div class="form-group row">
<label for="name" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="name" required autocomplete="name" autofocus placeholder="Name" v-model="form.name">
<span class="invalid-feedback d-block" role="alert" v-if="form.errors.has('name')" v-text="form.errors.get('name')"></span>
</div>
</div>
Above is code of my input field name and I want to show detail of input field when I clicked on it, I have also attached the screen shot of my view where I wanted to click and show the detail page view
If I click on u-blox field I wanted to show the detail view. How can I achieve this?
The question is not very much clear. Maybe you can share some more code or maybe a fiddle for better help. From what I understand from the question, you can either opt to use a routing-based approach. Or if things are to be kept simple, simply render a for detail view conditionally using the v-if directive.
<div class="form-group row">
<label for="name" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="name" required autocomplete="name" autofocus placeholder="Name" v-model="form.name">
<span class="invalid-feedback d-block" role="alert" v-if="form.errors.has('name')" v-text="form.errors.get('name')"></span>
</div>
</div>
<div v-if="showDetailsView">
Details View template or Component can be rendered here.
</div>
The showDetailsView variable can be toggled through a click listener bound to the u-blox element.
Please refer https://router.vuejs.org/ for Vue-Router and https://v2.vuejs.org/v2/guide/conditional.html#v-if for Conditional Rendering.
I am having trouble disabling Chrome's payment method dropdown that is supposed to appear when you click in the credit card field but it is appearing when you click in a subject input field. Please note, the HTML is generated automatically and cannot be edited directly, I will need to adjust using JS.
<form>
<div id="subject_row" class="form-row form-text eCardFields show">
<div class="form-content">
<span class="field-required"></span>
<label for="ecard_subjectname">Subject: *</label>
<input type="text" name="ecard_subjectname" id="ecard_subjectname" value="" maxlength="50" placeholder="disabled only for this component">
<input type="hidden" name="ecard_subjectsubmit" id="ecard_subjectsubmit" value="true">
</div>
</div>
</form>
This is what I have tried:
//attempt 1
$('#ecard_subjectname').attr('autocomplete', 'new-password');
//attempt 2
$('#ecard_subjectname').attr('autocomplete', 'off');
Try using terrylinooo's disableAutoFill for jQuery: https://github.com/terrylinooo/jquery.disableAutoFill
I am using ng-repeat for printing the HTML input element. I want to check that when I add new HTML input element it should not contain the same value as compared with the previous one.
This is my code.
<div class="row" ng-repeat="m in machines">
<div id="machinename_{{$index}}">
<input id="machinenameInput_{{$index}}" type="text" class="form-control" maxlength="20" ng-model="m.alias" required>
</div>
</div>
In the above code when i add new machine name it should not contain the same name.Thank you in advance
use ng-if to display the machine only if the previous machine has a different value
<div class="row" ng-repeat="m in machines">
<div ng-if="machines[$index-1] != machines[$index]" id="machinename_{{$index}}">
<input id="machinenameInput_{{$index}}" type="text" class="form-control" maxlength="20" ng-model="m.alias" required>
</div>
</div>
I'm building a multi-step AngularJS form that adds bootstrap error classes on ng-class. I'm using this tutorial as my base for building the form http://scotch.io/tutorials/javascript/angularjs-multi-step-form-using-ui-router#building-our-angular-app-app.js.
Question: Why are my ng-class css classes not being applied to my form-group wrapper when child fields are invalid? My submit button stays disabled until form fields are correct, but error classes and styling never gets applied.
HTML
<div class="form-group" ng-class="{'has-error has-feedback' : longForm.fullName.$invalid && !longForm.fullName.$pristine}">
<label class="hidden-xs" for="FullName">Full Name</label>
<input class="form-control input-lg" type="text" name="FullName" placeholder="Your Full Name" ng-model="longFormData.fullName" required />
</div>
<div class="form-group">
<button class="btn btn-cta btn-lg btn-block" type="submit" ng-disabled="longForm.$invalid">Next</button>
</div>
In this particular case it's actually really simple.
You have the name of your input as FullName, but you are referencing it as fullName.
The property names published on the form controller are case sensitive, so just change the case of either:
name="FullName" to name="fullName"
OR
longForm.fullName to longForm.FullName