Develop Reference

Angular7 Detect change of input value in reactive forms

I am working for the first time with reactive forms in Angular(v7)
I want to make my submit button enabled if any of the fields has changed. So I am working with the dirty value of the form.
For a simple scenarios its working. I change a input type text and the button became enable.
But now I got a problem with an element (<span id="locationUpdated">) that the value inside of it is being changed by the result of some other javascript functions.
So I decided to listening the change of an hidden input that get the value the same way as the span element
<form [formGroup]="model.form" >
....
<input id="nameInput" type="text"
[(ngModel)]="model.user.name"
formControlName="name" />
...
<span [textContent]="model.user.location.label" id="locationUpdated"></span>
<input type="hidden" [value]="model.user.location.label" formControlName="location" />
....
<button [ngClass]="{'disabled': !model.form.dirty}></button>
</form>
--- Component ---
private buildFormUpdated() {
this.model.form = this.formBuilder.group({
name: [this.model.user.name, [Validators.required]],
location: [this.model.user.location.label]
});
}
I replace the hidden to text so I can see the value change and it is working fine.
However the property dirty continues false. If I change manually I get the dirty:true
What am I missing?
Thanks

What am I missing?
The dirty flag is not set to true when the data is changed programatically.
It is set to true only if the user blurs the control component, or changes the value (through the UI)
Please ref official docs - https://angular.io/guide/form-validation#why-check-dirty-and-touched

you can explicit marks the control as dirty by doing this after your logic
this.model.form.markAsDirty();

KnockoutJs validation error message from .html file

I have a question regarding KnockoutJs html5 validation.
If i wanted to include my error message on the page when it was loaded, like say i am doing a frontend module for my webshop and my error messages comes from tags.
In knockoutJS 2.2.1 i would be able to do this like so:
<span data-bind="validationMessage: firstName, text: 'Your error.'"></span>
<input data-bind='value: firstName, valueUpdate: "input"' required pattern="^[A-Za-z]{1,255}$" />
this would work fine and i could paste my errortag into the html page from the html file.
As seen in this fiddle.
http://jsfiddle.net/elbecita/gt228dgm/4/
However the problem is now that running the same code under knockoutjs 3.0 f.ex. the error message would be "This field is required."
So now i cant overwrite the custom message anymore without doing .extend(), is this intended and am i using this entirely wrong?
A gif to illustrate the issue: http://puu.sh/kHJH3/92a2708c93.gif
I found a similar problem on stackoverflow some of the solutions just seemed overkill but maybe there was a reason?
Setting error message in html with knockout validation this didnt have any accepted answers,so my question is really how do i paste my error message in the html?
Any input is much appreciated, thank you.
*(if i missed any information please let me know, first post long time lurker)

Validations can have multiple independent messages, so it makes some sense that the contents of the message are taken out of your hands. You choose where they display, but don't have to worry about what they say. I can see that you might want to intercept the standard message and turn it into a custom message. You can do that, but it's not built into validation (as far as I know).
viewModel.errors = ko.validation.group(viewModel);
var messageSubstitutes = {
'Invalid.': 'All letters',
'This field is required.': 'Try some letters'
};
viewModel.errMsg = ko.computed(function () {
var errs = viewModel.errors();
if (errs.length === 0) return null
var errMsg = errs[0](),
result = messageSubstitutes[errMsg];
return result;
});
and the HTML is just:
<legend data-bind="if:errMsg">Error: <span data-bind="text:errMsg"></span>
</legend>
<label>First name:
<input data-bind='value: firstName, valueUpdate: "input"' required pattern="^[A-Za-z]{1,255}$" />
</label>
Updated Fiddle

Problems with knockout-validation custom message template

I've not used Knockout Validation and I'm trying to get a feel for what can be done with it.
I'm trying to figure out if it is possible to display an icon rather than an error message to the right of an input tag when there is an error. And, if the user hovers over the icon, the error message is displayed.
Has anyone done this or have an idea of how to accomplish this?
Thanks.
EDIT: (more detailed example of what I'm trying to do)
Say I have the following in my view model:
var firstName = ko.observable().extend({required: true});
My HTML:
<input data-bind="value: firstName" />
My understanding is that if the first name textbox were left blank, then (by default) some text would be displayed to the right of the textbox stating that this field is required.
What I'm trying to understand is how to change the default behavior of displaying error text on the right to displaying an icon on the right which, when hovered over, will popup the error message.
So, a start would be something like:
<div data-bind="validationOptions: {messageTemplate: 'myCustomTemplate'}">
<input data-bind="value: firstName" />
<input data-bind="value: lastName" /> //also required
</div>
<div id='myCustomTemplate'>
//This icon should only display when there is an error
<span class="ui-icon ui-icon-alert" style="display: inline-block"/>
//css/javascript would display this when user hovers over the above icon
<span data-bind="validationMessage: field" />
</div>
I have no clue if I'm using the messageTemplate feature correctly. I also wouldn't know what to bind the text to in the customTemplate in order to display the correct error message for each error. IOW, firstname and lastname could have custom error messages. If they are both using the same template, how does the template accomodate the custom error message?
I hope that makes sense.

It is possible to show an icon and to display the error message on hovering.
In one project we are doing something similar. We show a badge with a error number, but we use decorateElement to highlight the fields and errorsAsTitleOnModified to show the errors when hovering over the input.
To create a error messageTemplate you should wrap your template in a script tag. It works like templates of the ko template binding.
Inside the template you can access the validated observable by referring to 'field'. The error message is stored in the property 'error' of your observable.
<script type="text/html" id="myCustomTemplate">
<span data-bind="if: field.isModified() && !field.isValid(),
attr: { title: field.error }">X</span>
</script>
I have created a fiddle to show this in action: http://jsfiddle.net/nuDJ3/180/

get html input into a rails function

I have a piece of html like this:
<div class="row well">
<form method="POST">
<ol id="velArea">
<li> Layer velocity: (m/s) <input type="text" name="source[]"> </li>
</ol>
<input type="button" value="Add another layer" name="velocity" onClick="addVel('velArea');">
</form>
</div>
and a javascript function that adds html to the area
function addVel(area)
{
var field_area = document.getElementById(area);
field_area.innerHTML += "<li> Layer velocity: (m/s) <input type='text' name='velocity'> <a style='cursor:pointer;color:grey;' onclick='this.parentNode.parentNode.removeChild(this.parentNode);''>delete</a> </li>";
}
I need to read the value of each input field in a rails function. And have no idea about how to do that. I've lost days going through active model in rails, thinking that was the way until I finally figured out that is better to keep the browser-related and server related things separated. So I learned a little javascript and made a few functions. Yes, I'm new to web development. I'm using rails 3.2.
The function that I want to uses the fields info is called by a button:
<%= button_to "Run single inversion", {:action => "my_func", }, {:remote => true, :form => { "data-type" => "json" }, :class => "btn btn-primary"} %>
and the function on the controller is:
def my_func
render :nothing => true
vel = params[:velocity]
puts vel.class
puts 'Hi'
end
the output I get is
NilClass
Hi
so I'm clearly not passing the arguments right. I'm guessing I need to pass the velocity array in the post method when I use the button_to, but have no idea about how to do that.
Also, I'm need the value of the input, not anything database oriented so I cannot look it up using activeRecord properties.

in your rails controller, you should be able to access a params[:model_name] when the javascript submits the form to whatever method you need it to go to. you can also access a params[:id] or params[:firstname]
i'm also a bit confused as to what you are doing with
<input type='text'> </input>
that doesnt have a name attribute, which is needed by the model to identify it and associate its value with a column. it also isnt the proper way do an input.
<input type="text" name="column_name"/>
is closer to what you want

I am not sure why your code is so complicated. But basically there are a few things, that are not the RailsWay. First, you should have a look to the Rails Form Helpers. If you are using the conventions, you will receive a params hash like this:
params[:velocities][:velocity]
params[:velocities][:source]
The form tags would look like this:
<input type="text" name="velocities[velocity]" id="velocities_velocity" value="">
<input type="text" name="velocities[source]" id="velocities_source" value="">
In your above code you are expecting a value for vel. The resulting NilClass is because ther is nil in params[:velocity], so vel is nil. You should check the following:
puts params.inspect
Or have a look inside the log when running the Rails application.
And please recheck the name attributes of both the button and the input filed. They name attribute is both 'velocity'. If the button is the latter which is submitted, then the value of params[:velocity] is for sure empty ...

Display text inside a textfield with dynamic asp value

How can I write this so the text shows in the text field (search bar) during the page load?
<input type="text" id="addressInput" value="<%=addressStr%>" onblur="if(this.value=='')this.value='Search a location here';" onfocus="if(this.value=='Search a location here')this.value='';" />
At the moment the text only shows when you click in the textfield.

#detonate: You could just add some of the same logic to the ASP value so it'll show Search a location here if addressStr is blank:
<input type="text" id="addressInput" value="<% If addressStr = "" Then Response.Write "Search a location here" End If %>" onblur="if(this.value=='')this.value='Search a location here';" onfocus="if(this.value=='Search a location here')this.value='';" />

it looks like you're trying to setup a watermark for a textbox, is that correct?
I'm going to refer you to a basic example of textbox watermarking that should be able to give you an example and give everyone a bit of a common codebase for discussion, since you didn't include a lot of code in your post: http://www.codeproject.com/KB/aspnet/WatermarkTextBox.aspx
In it, I'll reference one of his codeblocks, that is similar to the one you posted:
<td>
<asp:TextBox ID="txtUserId" runat="server"
onfocus="Focus(this.id,'User ID')"
onblur="Blur(this.id,'User ID')"
Width="126px" CssClass="WaterMarkedTextBox">User ID</asp:TextBox>
</td>
While I realize he used ASP.NET instead of ASP, I wanted to draw attention to the fact that he put <textbox>text</textbox> so that you could see part of the answer to the question you directly asked above.
EDIT: Let me try this again: You would have something like this:
<textbox attributes="" methods="" >
<%=addressStr%>
</textbox>
Hopefully tho, the whole example given on that page will help you. Feel free to ask more questions.