How to make a default static value for input in material design?
<input type="text" value="xyz" />
but in material design angular I am unable to keep the static value like value="xyz
<md-input-container>
<label>Start date</label>
<input ng-model="agg.startDate" value="xyz">
</md-input-container>"
value xyz is not affected in this case.
In your controller create a variable named agg.startDate using the $scope variable, like following code to set the value of input field
$scope.agg = {startDate: 'xyz'};
check this fiddle link
Related
I have scenario where I am changing the input text, i have multiple forms and one input within each form so i want to get the current form name whose input i am changing. how to do this in angular 2??
Below is my code for child component
<form #form1="NgForm" novalidate>
<input id="phoneNumber" type="text" placeholder="phoneNumber" class="validate"/>
</form>
<form #form2="NgForm" novalidate>
<input id="mobileNumber" type="text" placeholder="mobileNumber" class="validate"/>
</form>
Now suppose i am adding mobile number i want its form name. How to do this angular 2?? This is i want to access in parent component I am accessing the child component form using #ViewChildren and i am able to access the form manually but i want access dynamically with respect to the input i am accessing ..
In Angular you have two choices use dynamic forms or template driven forms,
your choice is dynamic forms using #form1="NgForm"
Angular dynamic-form
In your code you forgot the '[formControlName]' directive on the inputs, when you have those you can access the form from your component code like:
Component:
this.form1.valueChanges.subscribe(data => console.log('Form changes', data));
HTML:
<form #form2="NgForm" novalidate>
<input [formControlName]="mobileNumber" type="text" placeholder="mobileNumber" class="validate"/>
</form>
I am able to get the current form valid invalid in parent form by passing index as input to child form and emitting the same in parent form...
I am trying to set the value of a textbox with vuejs
#{{ message }} works in the body or in a tag.
this does not
<input type="text" name="column_name" v-model="reverseMessage" value="{{message}}">
Neither does.
<input type="text" name="column_name" v-model="reverseMessage" value="#{{message}}">
The problem is that you are trying to bind input value multiple variables. Both to reverseMessage (using v-model) and to value (using interpolation).
Please remove value="{{message}}" and just set reverseMessage variable - this should update the input view.
<input type="text" name="column_name" v-model="reverseMessage"/>
and then
this.reverseMessage = "my new input value"
You cannot bind input to many variables in the template itself. Use watchers or computed properties if you really need this.
I encounter a problem when testing form validation with angularjs
According to angularjs form guide,
an input control that has the ngModel directive holds an instance of NgModelController. Such a control instance can be published as a property of the form instance using the name attribute on the input control.
I created test code at plunker, it all works fine untill I change the input name from
<input type="number" name="age" ng-model="user.age" max="100" required>
<p>{{form1.age.$error}}</p>
to
<input type="number" name="user[age]" ng-model="user.age" max="100" required>
<p>{{form1.user[age].$error}}</p>
Does this mean angular can not recognize array syntax in form input?
The problem for me is I want to keep the normal form submission flow and only use angular for form validation, so I need to keep form input as array to work with the backend form handling
It has nothing to do with Angular. It is a syntactic JS error.
If you want to reference a property named user[age], you should do it like this:
form1['user[age]'].$error
form1.user[age] is incorrectly interpreted as (form1.user)[age]
I'm working on a bigger project with AngularJS. Therefore, I want to make the work for a single form as easy as possible. As we're also using bootstrap, the code for a single input field in a form is quite verbose, maybe like
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email">
</div>
</div>
If I could write a single tag like
<custom-input
label="Email"
name="inputEmail"
placeholder="Email"
type="text"
... >
</custom-input>
instead, this would help to keep the code clean and the work simple.
To achive this, I'm working on a custom AngularJS directive. My directive currently uses a template similar to the bootstrap example from above, automatically assigning the label to the input-tag. Also, the directive's compiler function moves all attributes from the custom-input tag to the real input-tag in order to make it easy to customize the custom-input tag.
app.directive('customInput', function() {
return {
require: 'ngModel',
restrict: 'E',
template: '<div>' +
'<label for="{{ name }}">the label</label>' +
'<input id="{{ name }}" ng-model="ngModel" />' +
'</div>',
scope: {
ngModel: '=',
name: '#name',
},
replace: true,
compile: function (tElement, tAttrs, transclude) {
var tInput = tElement.find('input');
// Move the attributed given to 'custom-input'
// to the real input field
angular.forEach(tAttrs, function(value, key) {
if (key.charAt(0) == '$')
return;
tInput.attr(key, value);
tInput.parent().removeAttr(key);
});
return;
},
};
});
On Stack Overflow, there are many questions regarding the creation of custom input fields, but they are concerned with the data binding, custom formatting or binding to ng-repeat.
My approach however has a different issue: while the data binding works correctly, Angular's integrated form validation module get confused when the input field is 'required'. For some reason, validation doesn't recognize the new input field and instead keeps the form invalid because of some dead reference, which has an empty value. Please see the minimal example.
Where does the dead reference come from? How can I update the validation-module's references? Is there a better way to achieve my overall goal?
As a boolean attribute, there is a corresponding required property that is still true on your div even if the attribute is moved.
The required attribute isn't getting moved, it must be getting skipped because there is no value. I don't know how to even add it to an element using javascript without a value, but using the form required="required" fixes that
Using transclude=true will use a copy of your element after the compile phase when you moved attributes, I think this keeps the required property from being set
You have to assign a higher priority for some reason, maybe because of ng-model, which is not removed from your div because the name in tattrs is ngModel (although removing from the div doesn't remove the need for priority)
http://plnkr.co/edit/5bg8ewYSAr2ka9rH1pfE?p=preview
All I did was change the required attribute to be required="required" and add these two lines to the directive declaration:
transclude: true,
priority: 10,
I put ng-transclude on the template label by the way so the contents of your element will go in the label and you don't have to have an attribute for that.
My class attribute has two CSS class values. The HTML starts out like this:
<input type="button" wicket:id="rowButton" class="jelly-button greenGradient"/>
And I want to dynamically change it to this:
<input type="button" wicket:id="rowButton" class="jelly-button redGradient"/>
Currently I am doing this:
component.add(new SimpleAttributeModifier("class", "jelly-button redGradient"));
What is the best way to do this in Wicket? There must be a more 'proper' way to do this than what I have done above.
Instead of using an attribute modifier with fixed text you could use an attribute appender with the text retrieved from a model. To change the class, just change the model's value. For example:
Model<String> gradientModel = new Model<String>("greenGradient");
...
component.add(AttributeModifier.append("class", gradientModel));
in the markup just have
<input type="button" wicket:id="rowButton" class="jelly-button"/>
Then when it is time to change the gradient use
gradientModel.setObject("redGradient");
or
gradientModel.setObject("greenGradient");
The example in the javadoc below explains it well
http://www.jarvana.com/jarvana/view/org/apache/wicket/wicket-core/1.5.2/wicket-core-1.5.2-javadoc.jar!/org/apache/wicket/behavior/AttributeAppender.html