Sounds so simple but I've tried quite a few things and none work.
I'm using Angular 4 and my form is template-driven:
<form #form="ngForm" novalidate>
<label for="insz">{{ 'SEARCH_PAGE.searchInszNumber' | translate }}</label>
<input type="text" name="insz" [placeholder]="'SEARCH_PAGE.searchInszNumber' | translate" #input required>
<button (click)="onSearch(input.value)" ><span>{{'SEARCH_PAGE.search' | translate }}</span></button>
</form>
I want to disable the button when the (one and only) input field is empty.
You are missing ngModel in your input, for your input field to actually be a form control:
<input type="text" name="insz" ngModel
[placeholder]="'SEARCH_PAGE.searchInszNumber' | translate" #input required>
and then you need to disable the button of course if form is not valid:
<button [disabled]="!form.valid" (click)="onSearch(input.value)" >Submit</button>
You could take a look at reactive forms. I had no knowledge of them until a week ago, but they're so powerful !
This means all you need to do is add a Validator (Validators.required in your case), and add a disabled condition to your button. And that's it, you're set.
Related
I have a Wicket page with this structure:
<form wicket:id="generalForm" method="post" class="form_recherche">
<input value="" type="text" wicket:id="myField_1" />
<form wicket:id="innerForm" method="post">
<input value="" type="text" wicket:id="myField_2"/>
<input type="submit" class="button-classic" wicket:id="accept_2"/>
</form>
<input type="submit" class="button-classic" wicket:id="accept_1" />
</form>
1 external form with 1 inner form. One field each. The fact is that when the "accept_2" button is clicked, the field "myField_1" is not submitted to the server (only the "myField_2" is submitted). And in fact, I would need the "field_1" field to do some validation.
What am I missing and why isn't the "myField_1" being filled on the server why "accept_2" is clicked?
You need to override Form#wantSubmitOnNestedFormSubmit() on the outer Form to return true. This way you will tell Wicket that you want the (outer) form to be submitted as well when one of its nested forms is submitted.
You used SO tags wicket-1.5 and wicket-1.6. I am not sure whether this method is available for your version of Wicket.
I want to build some dynamic form fields.
When I put an *ngIf in fron of the div the material design does not work properly (no effects etc.).
Here is the input field that works
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="number" id="playerCount" [(ngModel)]="playerCount" (ngModelChange)="setPlayerCount(playerCount)">
<label class="mdl-textfield__label" for="playerCount">Anzahl Spieler</label>
</div>
and the one that does not work
<div *ngIf="players" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="stuff">
<label class="mdl-textfield__label" for="stuff">stuff</label>
</div>
The second div should appear as soon as the first has been filled out.
You have to register new elements to MDL's componentHandler since *ngIf actually removes the element from the dom, you have to register that element every time Angular removes/inserts it.
You can either call componentHandler.upgradeAllRegistered(); every time *ngIf inserts the element or replace *ngIf with something that is just hides the element but not remove it.
I want to use a form to do parametric filtering by passing values to a URI. Specifically, part of this form would entail multiple checkboxes for one parameter set, I'll call this 'my-checkbox-parameter'
What I Have
A basic form with checkbox fields that post the values via the GET method
This does correctly post the values as I'd expect
My code:
<form id="results-filters" class="form-inline" action="form.php" method="GET">
<div class="form-group">
<label class="checkbox-inline">
<input type="checkbox" id="val3" value="val1" name="my-checkbox-parameter[]" class="form-control">
Value 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="val2" value="val2" name="my-checkbox-parameter[]" class="form-control">
Value 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="val3" value="val3" name="my-checkbox-parameter[]" class="form-control">
Value 3
</label>
</div>
<button type="submit" class="btn btn-default">
Filter Results
</button>
</form>
What I'm Stuck on
Making the checkbox fields reflect 'checked' status based on what parameters are in the URL. For instance, if my URI is: /form.php?my-checkbox-parameter[]=val1&my-checkbox-parameter[]=val2 , how can I make sure that the field values for 'Value 1' and 'Value 2' are checked? Is JavaScript/AJAX the only way to do this?
Bonus points, not a super huge priority, but rather a 'nice to have'... Is there a better way to handle checkbox value arrays in URIs? For instance, if I have 10 checkbox fields, the concatenated URI with these parameters might be quite long...
Thanks in advance!
First:
$checked= array();
$checked=$_GET['my-checkbox-parameter'];
And then:
<input type="checkbox" id="val1" value="val1" name="my-checkbox-parameter[]" class="form-control" <?php if(in_array("val1", $checked))echo "checked"; ?> >Value 1
So if there is val1 in your get parameters, the check box will be checked.
Do it for all check boxes and it should be ok.
AND for the second question: actually you are doing well with my-checkbox-parameter[ ], it's the usual way to do it in PHP. But you can check this question for more ways.
With Bootstrap 3, form input element size does not change as specified by size attribute, code snippet:
<input class="form-control" id="exampleInputEmail1" placeholder="Enter email" type="email" size="50">
I understand that there are workarounds to shorten the length of an input element but, help me understand why doesn't it work with size attribute of input element?
Working code at bootply.
Thanks!
There are a couple things you could do. You could use Bootstrap's col-* classes to change how your form lays out, or you can either modify the CSS or add inline styles to your inputs (such as <input ... style="width:200px;">).
I would personally try to use the col-* classes for consistency, even though it adds a bit more markup to your pages. As an example, something like this:
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1" class="col-sm-4">Email address</label>
<div class="col-sm-8">
<input class="form-control" id="exampleInputEmail1" placeholder="Enter email" size="50" type="email">
</div>
</div>
...
I'd also try to follow the documentation and examples from the Bootstrap docs.
if you are using bootstrap 3 try placing your inputs in a div
<div class="col-md-6">
<input class="form-control" id="exampleInputEmail1" placeholder="Enter email" type="email" />
</div>
If you're using Visual Studio then you might want to remove Microsoft's defaults in the Site.css which contains:
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
I have this situation in which I show 1 form in two steps. So to proceed to the second part of the form you have to click on a button. But before moving on I would like to perform form validation (all required fields need to be filled in). But because this is a normal button, the whole submit magic is not triggered and the validation does not happen. So the question I'm interested in is how can I trigger form validation in my controller ? It would even be better to trigger validation for specific fields. Just to give an idea, the form looks like
<form name="form" submit="save()">
<section id="step1">
<label for="username" required>Username</label>
<input type="text" name="username" ng-model="user.username" required />
.....
<button ng-click="proceed()">Proceed</button>
</section>
<section id="step2">
<label ...></label>
<input...>
....
<button type="submit">Save</button>
</section>
</form>
Also, I don't want to opt for disabling the button until all required fields are valid.
Take a look at the ng-form directive. It allows nesting forms (actually not HTML <form>s, but Angular NgFormControllers). So you can split your one form, used for posting to the server, into two logical forms, used for independent validation:
<form submit="save()">
<div ng-form="form1">
...controls...
<button ng-click="proceed()"
ng-disabled="form1.$invalid">Proceed</button>
</div>
<div ng-form="form2">
...controls...
<button type="submit"
ng-disabled="form2.$invalid || form1.$invalid">Submit</button>
</div>
</form>
You can access the $valid property from your controller. Something like this could work.
$scope.proceed = function(){
if($scope.form.username.$valid){
//username is valid we may proceed to the next step
}
};
<button ng-click="proceed()">Proceed</button>
Replace To :
<button ng-click="proceed()" ng-disabled="form.$invalid">Proceed</button>
Button will not visible button until all required fields are valid.
DEMO