I'm trying to add two buttons which should only show if there is some text in the input field else it should be hidden/disabled by default,but I'm getting this error.
<div class="card card-body">
`<form>`
`<div class="form-group">`
`<input type="text" class="form-control" placeholder="Add a Log ...">`
`<input type="submit" value="Add Log" class="btn btn-light" [disabled]=!this.text>`
`<button class="btn btn-warning" [hidden]=!this.text>Clear </button>`
`</div>
`</form>
</div>
Error :
Clear
~~~~~~~~~
src/app/components/log-form/log-form.component.ts:5:16
templateUrl: './log-form.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component LogFormComponent.
You can implement this easily by using ngModel as below:
mycomp.component.html
<form>
<div class="form-group">
<input type="text" class="form-control" name="text" [(ngModel)]="textvalue" placeholder="Add a Log ...">
<input type="submit" value="Add Log" class="btn btn-light" [disabled]="!textvalue">
<button class="btn btn-warning" [hidden]="!textvalue">Clear </button>
</div>
{{textvalue}}//contains value of your input element.
</form>
mycomp.component.ts
export class MyComponent {
textvalue:string;
}
Be sure to import FormsModule in the imports[] array of app.module.ts file in order for ngModel to work.Also name attribute of input is important or you could use formControlName.
Hope this helps!!!
You are missing the quotes in your template:
[disabled]="!this.text"
No need for backticks inside of backticks
"text" not this.text
`<form>
<div class="form-group">
<input type="text" class="form-control" placeholder="Add a Log ...">
<input type="submit" value="Add Log" class="btn btn-light" [disabled]="!text">
<button class="btn btn-warning" [hidden]="!text">Clear </button>
</div>
</form>`
Related
Suppose that I have the below form in an angular component. How do I focus on the Log in button after clicking on enter key?
<form class="mt-4" #contactform="ngForm">
<input type="text" class="form-control" aria-describedby="emailHelp" placeholder="" [(ngModel)]="model.eMail" required>
<input type="password" class="form-control" placeholder="" [(ngModel)]="model.password" required>
<button type="button" class="btn btn-primary btn-lg btn-block" (click)="onClickSend(contactform)">Log in</button>
<button type="button" class="btn btn-primary btn-lg btn-block">Clear</button>
</form>
Thanks in advance.
Change the login button to type "submit" - and the enter key will trigger it.
<button type="submit" class="btn btn-primary btn-lg btn-block" (click)="onClickSend(contactform)">Log in</button>
You can also use ngSubmit on the form tag instead of click:
<form class="mt-4" #contactform="ngForm" (ngSubmit)="onClickSend(contactform)">
<button type="submit" class="btn btn-primary btn-lg btn-block">Log in</button>
</form>
I wanted to add validation to this input
<div class="col-lg-6">
<!-- Content Here -->
<!-- Needs Validation -->
<input type="text" name="name" class="form-control" id="name" value="" required>
<a class="btn btn-hercules-font btn-lg btn-block mt-5" href="add_workout_2.php" role="button" id="add_button">+ ADD EXERCISES TO WORKOUT</a>
</div>
I tried using the required tag but it doesn't seem to work (I can just click the submit button without inputting any value).
Edit:
<form action="add_workout_2.php">
<input type="text" name="name" class="form-control" id="name" value="" required>
<a class="btn btn-hercules-font btn-lg btn-block mt-5" type="submit" role="button" id="add_button">+ ADD EXERCISES TO WORKOUT</a>
</form>
In this case the "required" parameter will only trigger, if a valid "submit" event is getting called correctly. Anchor tags has the "type" parameter, but it's not for the same use as an input/button tag. I'd suggest that you convert your anchor tag to a button as follows:
<form action="add_workout_2.php">
<input type="text" name="name" class="form-control" id="name" value="" required>
<button class="btn btn-hercules-font btn-lg btn-block mt-5" type="submit" role="button" id="add_button">+ ADD EXERCISES TO WORKOUT</button>
</form>
Then you'll get the wanted result. If you don't want the styling of the button, you can work around that with styling. For future reference, you don't need to add "value="" to the input tag for having an empty tag :-)
I hope it helped.
Change your code to this:
<form action="add_workout_2.php">
<input type="text" name="name" class="form-control" id="name" required>
<input class="btn btn-hercules-font btn-lg btn-block mt-5" type="submit" role="button" id="add_button" value="+ ADD EXERCISES TO WORKOU">
</form>
we used data-dismiss in html form it's working fine. but the modal close every time when click submit button weather form is valid or invalid
Html code
<form #AddAirlineuser="ngForm">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">CREATE PROFILE</h4>
</div>
<div class="modal-body">
<label>Name</label>
<p><input type="text" name="name" class="form-control" aria-label="..." ngModel></p>
<label>Email</label>
<p><input type="text" name="email" class="form-control" aria-label="..." ngModel></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Delete</button>
<button type="submit" class="btn btn-primary" (click) = "Btn_AddNewAirline(AddAirlineuser.valid,AddAirlineuser.value)">Submit</button>
</div>
</form>
TypeScript code
Btn_AddNewAirline(formstatus: any,data:any){
let AirlineData: any = {
name: data.name,
email: data.email
};
if(formstatus){
// TODO code form status is valid
}
}
Can anyone give me some advice on how to transform this:
<p>Find Entry/Exit: #Html.TextBox("SearchString", null, new { #placeholder = "Search..." }) <input class="btn btn-danger btn btn-xs" type="submit" value="Search" />`
to bootstrap button add on?
I want to do something like this:
<div class="col-lg-4">
<div class="input-group">
<input type="text" class="form-control" />
<span class="input-group-btn">
<button class="btn btn-default" type="button">Search</button>
</span>
</div>
</div>
, but I don't know where to put "Search String" in it. Thanks in advance!
try following
<div class="col-lg-4">
<div class="input-group">
<input type="text" class="form-control" id="SearchString" name="SearchString" placeholder="Search String"/>
<span class="input-group-btn">
<button class="btn btn-default" type="button">Search</button>
</span>
</div>
</div>
Please make sure to add bootstrap css and JS libraries in your page.
Reference to bootstrap
I have the following Bootstrap markup:
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="username">Username</label>
<div class="col-md-4">
<input id="username" name="username" type="text" placeholder="" class="form-control input-md" required="" maxlength="8" value="">
</div>
</div>
<!-- Button (Double) -->
<div class="form-group">
<label class="col-md-4 control-label" for="submit"></label>
<div class="col-md-8">
<button id="submit" name="submit" class="btn btn-primary" value="1">Create Profile</button>
<button id="cancel" name="cancel" class="btn btn-default" value="1">Cancel</button>
</div>
</div>
When I click the Create Profile button the form works fine letting me know that certain fields are "Required". But when I click the Cancel button I cannot leave the form due to incomplete required fields.
Is there a form cancel button capability in Bootstrap?
Change your code to the following:
<!-- Button (Double) -->
<div class="form-group">
<label class="col-md-4 control-label" for="submit"></label>
<div class="col-md-8">
<button id="submit" name="submit" class="btn btn-primary" value="1">Create Profile</button>
Cancel
</div>
</div>
simply set the type attribute to reset as shown below;
<button type="reset" class="btn btn-default pull-right">Cancel</button>
if you would like to keep both elements as <button>. You can create a click handler with jQuery:
$('#cancel').click(() => {
location.href = '../' //returns to parent
})
A direct method is to use onclick="history.back()" Like so:
<button id="cancel" name="cancel" class="btn btn-default" onclick="history.back()">Cancel</button>
It is supported in all browsers at the time of this posting