I'm using mdb in my ember app. I'm generating dynamic value for the input field. In the UI value and label are getting overlapped. How to deal with it?
<div class="md-form">
<i class="fa fa-user-o prefix grey-text iconSize"></i>
{{input type="text" id="firstName" class="form-control" value=model.firstName}}
<label for="firstName">First Name<i class="mandatoryIcon">*</i></label>
</div>
Try this:
didInsertElement() {
this._super(...arguments);
if (this.get('model.firstName') !== null) {
Ember.$('firstName').focus();
}
}
You can always use the autofocus attribute as well
{{input type="text" id="firstName" class="form-control" value=model.firstName autofocus=true}}
Related
What I want to achieve: I want pre-populated data in my form and I also want to use formControlName as I want the data too.
My html file -
<div class="container">
<p class="h4 my-5">Add New Result</p>
<div class="row">
<div class="col">
<form (ngSubmit)="editStudent()" [formGroup]="studentEditForm" name="myForm">
<div class="mb-3">
<label for="roll-no" class="form-label">Roll No.</label>
<input type="number" class="form-control" id="roll-no" name="rollno" formControlName="rollno" value="{{student.rollNo}}" placeholder="{{student.rollNo}}" autocomplete="off" required>
</div>
<div class="mb-3">
<label for="name" class="form-label">Name</label>
<input type="text" class="form-control" id="name" name="name" formControlName="name" value={{student.name}} required>
</div>
<div class="mb-3">
<label for="email" class="form-label">Email address</label>
<input type="email" class="form-control" id="email" name="email" formControlName="email" value={{student.email}} required>
</div>
<div class="mb-3">
<label for="score" class="form-label">Score</label>
<input type="number" class="form-control" id="score" name="score" formControlName="score" value={{student.score}} required>
</div>
<button type="submit" class="btn btn-primary" ng-click="submitForm(myForm.$valid)">Submit</button><button type="submit" class="btn btn-dark mx-4">Clear</button>
</form>
</div>
<div class="col"></div>
<div class="col"></div>
</div>
</div>
In Input Tag, I want to use value attribute so I can get a default value but I get Empty fields and I think it is because formControlName is controlling the data in my form. Is there a way to get pre-populated data using value attribute along with formControlName attribute?
Placeholder attribute works fine but I want a default value.
if you want a default value simply initialize the form with values, for example:
form = new FormGroup({
name: new FormControl('defaultNameValue'),
email: new FormControl('defaultEmailValue')
})
You should be doing it in you component instead of using value attribute. While defining the form example
studentEditForm= new FormGroup({
rollNo: new FormControl(this.student.rollNo)
})
or if student data is not available at the time of definition then use formcontrol.setValue after you initialize the student data something like
this.studentEditForm.controls.rollNo.setValue(this.student.rollNo)
Using the value and the CVA (Control Value Accessor: formControlName, formControl, and ngModel) to control the value of the input will override each other each time you change anyone of them.
Instead, it's better to rely only on one of them. If the CVA is used, then you can pass an initial value (default value) to the form-control while defining it:
studentEditForm = new FormGroup({
score: new FormControl(YOUR_INITIAL_VALUE),
});
For more info, check here how Angular passes the value from CVA to the value property when using both of them:
default_value_accessor.ts
Used value and CVA to control value
try this :
studentEditForm = new FormGroup({
score: new FormControl(VALUE),
});
Hi I am not getting this auto address when I am using *ngIf or trying to append the div, otherwise its working completely fine.
What am I supposed to do to get this auto address along with *ngIf and appending it.
<div class="form-group label-floating">
<label class="control-label">Address1</label>
<input type="text" class="form-control search-address" name="address1" placeholder=" " [(ngModel)]="address1" #address1>
</div>
In the above code auto address is working
<div *ngIf="isShow">
<div class="form-group label-floating" *ngFor="let place of places">
<label class="control-label">Place</label>
<input type="text" class="form-control search-address" name="address2" placeholder=" " [(ngModel)]="place.address2" #address2>
</div>
</div>
In the above code auto address is not working and the only difference is I am using structural directives.
my ts code
const address1 = new google.maps.places.Autocomplete(this.address1.nativeElement, { componentRestrictions: { country: 'IN' }, types: [this.adressType]
});
google.maps.event.addListener(address1, 'place_changed', () => { this.place = address1.getPlace(); this.invokeEvent(this.place);
});
Please suggest me a good solution where I can use all three of them.
Thank You.
Im fill data into the model and it shown like this way.
after click input field display this way.
this is blade (model-edit-users)
<div class="md-form col-md">
<input type="text" id="name" name="name" class="form-control" required>
<label for="name" class="">User Name</label>
</div>
this is javascript code i used.
$('#users_view_table tbody').on('click', '#editUser', function (e) {
e.preventDefault();
var data = oTable.row($(this).parents('tr')).data();
var dataname = data.name;
$("#model-edit-users").modal('show');
$('#model-edit-users').on('shown.bs.modal', function () {
$('#name').val(dataname);
});
});
anyone help me to solve this UI issue
You can try to use <md-input-container> like following
<md-input-container>
<label>User Name </label>
<input type="text" id="name" name="name" class="form-control" required>
</md-input-container>
I have a simple form (reduced from the actual form to demonstrate the problem):
<pre>Name: {{currentChild.name}}</pre>
<pre>Annual College Expense: {{currentChild.annualCollegeExpense}}</pre>
<form name="childForm" novalidate>
<div class="form-inline">
<div class="form-group">
<label>Name:</label>
<input type="text" name="name" class="form-control" ng-minlength="1" ng-model="currentChild.name" ng-required="true">
<div class="help-block"
ng-messages="childForm.name.$error"
ng-show="childForm.$submitted || childForm.name.$dirty || (childForm.name.$invalid && childForm.name.$touched)">
<p ng-message="required" ng-hide="childForm.name.$valid">Your name is required.</p>
<p ng-message="minlength" ng-hide="childForm.name.$valid">Your name is too short.</p>
</div>
</div>
<div class="form-group">
<label>Annual Expenses:</label>
<input type="text" name="annualCollegeExpense" class="form-control" ngModel="currentChild.annualCollegeExpense" />
</div>
</div>
</form>
When I fire up the form, I see the expected data in the pres at the top of the form. When I type into the name field, the name in the pre changes. When I type into annual expense field, the annual expense pre does NOT change.
Since these are IDENTICAL and appear to obey all the usual ng-model rules, i.e., use a . to reference the data in the model, I'm stumped.
Anybody got a suggestion?
you used ngModel instead of ng-model so you should use
ng-model="currentChild.annualCollegeExpense"
instead of
ngModel="currentChild.annualCollegeExpense"
use
<input type="text" name="annualCollegeExpense" class="form-control" ng-model="currentChild.annualCollegeExpense" />
I am using angularJS directive and i want to find each input whether it has any errors, for example: required or pattern is incorrect.
HTML:
<form validation name="loginForm" ng-submit="form(this)">
<label> example 1
<input type="text" name="firstname" ng-model="user.firstname" ng-model-options="{ updateOn: 'mousedown blur'}" required
ng-pattern="validationPatterns.firstname">
</label>
<label> example 2
<input type="text" name="lastname" ng-model="user.lastname" ng-model-options="{ updateOn: 'mousedown blur'}" required
ng-pattern="validationPatterns.lastname">
</label>
<button class="btn" type="submit">Continue</button>
</form>
Directive: This outputs the names of each input name ( firstname and lastname and it includes all the objects like $required, $errors, $invalid etc...)
element.find('button').on('click', function () {
var input = element.find('input');
angular.forEach(input, function (inputs) {
var inputName = $(inputs).attr('name');
console.log(scope.loginForm[inputName]);
});
});
Now how do I check each element input, for example:
if input[name].$error.required=== true, show an error message. I wanted to check this on the directive not the HTML
You can do something like this:
<div class="input-group">
<label for="firstname">Firstname</label> <input name="firstname" type="text"
class="form-control input-sm" ng-model="user.firstname" required />
<span
ng-show="loginForm.firstname.$error.required && loginForm.firstname.$dirty">Required!
</span>
</div>
Hope this helps!