We Keep Coding

angular button disable when form control empty

I need to disable search button, when text-box empty. I tried to add disable attribute to search button. but its not working.
This is my html code:
<div class="col-md-5 pl-0">
<div class="input-group mb-3">
<input
type="text"
placeholder="Enter MTCN Number"
maxlength="16"
class="form-control mtcn-textbox"
[formControl]="mtcn"
required
type="text"
aria-describedby="basic-addon2"
/>
<div class="input-group-append">
<button
class="btn btn-primary"
type="button"
(click)="retrieveData()"
[disabled]="mtcn"
>
Search
</button>
</div>
</div>
</div>
Can someone help me to achieve this?

You can disable your button just using [disabled]="!mtcn.value".
Or you can disable button if your form is not valid: [disabled]="!myForm.valid"

You can try [disabled]="!mtcn.value" or put your code into Form tag and giv it an id and use "form.valid"

Please note that mtcn is a FormControl, which is always truthy. You want to check the value of the FormControl.
You have 2 possibilities.
1. disabled attribute
<div class="input-group mb-3">
<input type="text" placeholder="Enter MTCN Number" maxlength="16" class="form-control mtcn-textbox" [formControl]="mtcn" required type="text" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-primary" type="button" (click)="retrieveData()" [disabled]="!mtcn.value">Search</button>
</div>
</div>
2. disabled class (since it seems you are using bootstrap)
<div class="input-group mb-3">
<input type="text" placeholder="Enter MTCN Number" maxlength="16" class="form-control mtcn-textbox" [formControl]="mtcn" required type="text" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-primary" type="button" (click)="retrieveData()" [ngClass]="{ disabled: !mtcn.value }">Search</button>
</div>
</div>

The [disabled]="!mtcn.value" would work, but I'd like to strongly advise against it. Assume you want to add some other validation rules (length, pattern, whatever) - you'd need to repeat the same thing twice, in the form control itself and in the button. In the long run, it'll get tedious to maintain and invite bugs.
Just go
<button [disabled]="mtcn.invalid">
Edit: Oh, and if you're using [formControl], put the validation rules in the mtcn definition in the TypeScript, not in the template, right now you're mixing model driven and template driven forms.

Preventing form submission on Enter key press in Angular

There are so many answers for this on stackoverflow. But unfortunately none of them is working for me. I will tell you what I have tried one by one.
<form (keydown.enter)="$event.preventDefault()" ...>
<button (keyup.enter)="skillsHandleEnter($event, skillString)"></button>
#Component(...)
class MyComponent {
skillsHandleEnter(event, skillString) {
event.preventDefault();
// ... your logic
}
}
But none of the approach is working. I am using ngx-tags-input which allows me to apply some tags separated by enter key. This creates a problem. The moment I press Enter key, my form gets submitted with just one tag that i was able to enter. Trust me I've tried almost everything to prevent this and also I dont want to over complicate the things. Please ignore naming conventions. I will fix them later.
Here's my blog.component.html before implementing any solution.
<form [formGroup]="editorForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<label for="exampleInputEmail1">
<h3>Title</h3>
</label>
<input type="text" class="form-control" id="inputTitle" aria-describedby="emailHelp" placeholder="Enter a question that explains your problem exactly">
<br>
<label for="editor">
<h3>Editor</h3>
</label>
<quill-editor [styles]="editorStyle" [modules]="config" formControlName="editor"></quill-editor>
</div>
<ngx-tags-input class="form-control input-lg" name="tags"></ngx-tags-input>
<button class="btn btn-primary mt-3 mb-3">Submit</button>
</form>
Please correct me.

I followed these two simple steps:
1) I added an attribute in my form tag.
(keydown.enter)="$event.preventDefault()"
2) Added (click) listener on the submit button
So the entire HTML code looks like:
<div class="container">
<div class="row pt-5">
<div class="col-md-12 col-lg-12 col-sm-12 bg-light">
<form [formGroup]="editorForm" (keydown.enter)="$event.preventDefault()">
<div class="form-group">
...
</div>
<button class="btn btn-primary (click)="onSubmit()">Submit</button>
</form>
</div>
</div>
</div>
The problem was that I was using click listener with the form tag itself along with keydown.enter.

the html button element has a three valid type
submit : the button submits the form data to the server. This is the default 🔥🔥 if the attribute is not specified, or if the attribut is dynamically changed to an empty or invalid value.
reset: The button resets all the controls to their initial values,
like . button: The button has no default
behavior and does nothing when pressed. It can have client-side
scripts associated with the element's events, which are triggered
when the events occur.
button: the button has no default behavior and does nothing when
pressed. It can have client-side scripts associated with the
element's events, which are triggered when the events occur.
so to solve the probleb just set the button type to button like this
<button type="button" (click)="onSubmit()" class="btn btn-primary mt-3 mb-3">Submit</button>

The only reason to use ngSubmit is to submit the form on "enter".
So you can remove the ngSubmit event listening and replace it by the click event of the button. I also removed the submit emitting from the button by adding type="button".
<form [formGroup]="editorForm">
<div class="form-group">
<label for="exampleInputEmail1">
<h3>Title</h3>
</label>
<input type="text" class="form-control" id="inputTitle" aria-describedby="emailHelp" placeholder="Enter a question that explains your problem exactly">
<br>
<label for="editor">
<h3>Editor</h3>
</label>
<quill-editor [styles]="editorStyle" [modules]="config" formControlName="editor"></quill-editor>
</div>
<ngx-tags-input class="form-control input-lg" name="tags"></ngx-tags-input>
<button type="button" (click)="onSubmit()" class="btn btn-primary mt-3 mb-3">Submit</button>
</form>

How to make an editable bootstrap html form

I am making a html form with bootstrap. The form will display some personal user details I store server side. I want a user to be able to view their details and edit them if they wish to.
Here is my basic form. It has two fields, Name and Postcode which are both disabled. It has two buttons, Edit and Save, the Save button is hidden.
<form class="form-horizontal">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input class="form-control" id="name" disabled>
</div>
</div>
<div class="form-group">
<label for="postcode" class="col-sm-2 control-label">Postcode</label>
<div class="col-sm-10">
<input class="form-control" id="postcode" disabled>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default" id="save" hidden>Save</button>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="edit" class="btn btn-default" id="edit">Edit</button>
</div>
</div>
</form>
When a user clicks the edit button I want to:
Enable the Name and Postcode fields
Unhide the Save button
Hide the Edit button
What is the best way to achieve this? Is there a javascript library I should use? Or is a bespoke function the way to go?
Also, is this generally the right approach? I was surprised at how few examples I've found of 'editable' html forms (i.e. ones that start as disabled, and become enabled with an edit button). I thought bootstrap might offer something out of the box but couldn't find anything.

I've put together a small example at https://codepen.io/anon/pen/vpdQmL
The underlying html/javascript is as follows:
<button
type="edit"
class="btn btn-default"
id="edit"
onclick="return handleEdit()">
Edit
</button>
function handleEdit() {
document.getElementById('name').disabled = false;
document.getElementById('postcode').disabled = false;
document.getElementById('edit').hidden = true;
document.getElementById('save').hidden = false;
return false;
}

How to enable and disable text fields is explaied here:
How to enable a disabled text field?
To show and hide Buttons I would use display:
https://www.w3schools.com/jsref/prop_style_display.asp
Like described here:
JavaScript style.display="none" or jQuery .hide() is more efficient?
Besides the edit-button needs an onClick="changeForm()"
And you need a Javascript Method changeForm that changes the display-values of the buttons and enables the text fields.

Tag Helpers not binding data when calling form submit via javascript

So I've got a form. I'm utilizing tag helpers. The form only has one text input, and I'm trying to use the Bootstrap "input-group-addon" div as the submit button for this small form.
I'm running into strange behavior. If I just hit the enter key after typing something into the input, the data binds fine over into the controller action.
However, if I attach an onclick listener to the div, and run getElementById('Form').submit();, when I click the div, it still takes me to the controller action, but none of the data is bound to the incoming for model.
Razor form:
<form asp-controller="Search" asp-action="HomeBuyersSearchSubmit" id="Home_Buyers_Search_Form">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="input-group">
<input asp-for="Query" class="form-control" placeholder="City, Neighborhood, Address, Postal Code or MLS #" />
<div onclick="javascript: document.getElementById('Home_Buyers_Search_Form').submit();" class="input-group-addon"><i class="glyphicon glyphicon-search"></i></div>
</div>
</div>
</div>
</div>
</form>
Controller action:
[HttpPost]
public IActionResult HomeBuyersSearchSubmit(SearchFilter filter)
{
return RedirectToAction("Index", filter);
}

I found a work around, but I'd still be curious in knowing what is going on.
For those interested, what I did was changed the "input-group-addon" to a button, and made some slight modifications to the padding and margins to make the button appear like the div counterpart. This also required Bootstrap's "form-inline" on the form. Data binding works as expected now.
<form asp-controller="Search" asp-action="HomeBuyersSearchSubmit" id="Home_Buyers_Search_Form" class="form-inline">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<input asp-for="Query" class="form-control" placeholder="City, Neighborhood, Address, Postal Code or MLS #" />
<button type="submit" class="input-group-addon"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</div>
</form>

AngularJS validation for ng-repeat form items

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