I have the following form with name input field. I am trying to put validations on the field. When I print the name.className value it prints ng-valid, ng-pristine and other classes.
I want to use *ngIf to display the error message but it is not working.
I tried *ngIf="name.ng-invalid" also but it is not working. Can anyone suggest what is wrong here?
<form class="form-horizontal div-table" >
<!-- Name -->
<div class="form-group row-even">
<label class="col-md-4 control-label">Name:</label>
<div class="col-md-7">
<input id="name" name="name" type="text" class="form-control" [(ngModel)]="data.name" required minlength="3" maxlength="64" #name>
<small *ngIf="name.ng-invalid">
Name is required (minimum 3 characters).
</small>
<small>
Element {{ name.className }}
</small>
</div>
</div>
</form>
Try setting #name="ngModel" on the input.
Then remove "ng" from
<small *ngIf="name.ng-invalid">
like so
<small *ngIf="name.invalid">
Try this code
<form (ngSubmit)="onSubmit()" #myForm="ngForm">
...
<div [hidden]="name.valid || name.pristine"
class="alert alert-danger">
Name is required
</div>
...
</form>
Related
I am making a web tool in angular 5 to help in the creation of new XML.
I am having trouble passing around the values of inputs and keeping them in the same input at the same time.
I Have a form with an event of ngSubmit that uses as a paremeter the reference of an ngForm
<form class="form-group" (ngSubmit)="createSimpleTypeList(f)" #f="ngForm" >
<div class="container">
<div class="row">
<div class="col-sm-12" >
<button class="btn btn-danger flex ">Construir Json!</button>
</div>
</div>
</div>
<hr>
<div class="container" *ngFor="let type of objSimpleType;let i =index">
<hr>
<div class="row">
<div class="col-sm-3">
<input type="text" [(ngModel)]="type.name" name="nameType"/>
<br>
Inserte el nombre del tipo:
</div>
<div class="col-sm-3">
<input type="text" [(ngModel)]="type.type" name="type"/>
<br>
Inserte el tipo:
</div>
<div class="col-sm-2">
<input type="number" [(ngModel)]="type.min" name="min"/>
<br>
Inserte minimo:
</div>
<div class="col-sm-2">
<input type="number" [(ngModel)]="type.max" name="max"/>
<br>
Inserte maximo:
</div>
<div class="col-sm-2">
<input type="checkbox" name="number" /> Numero?
</div>
</div>
</div>
<hr>
</form>
This is the createSimpleTypeList method
console.log(form.value.nameType);
this.objSimpleType.push({
'-name': form.value.nameType,
'xsd:restriction': {
'-base': form.value.type,
'xsd:minLength': {
'-value': form.value.min
},
'xsd:maxLenght': {
'-value': form.value.max
}
}
});
this.typeList.emit(form.value.nameType);
this.sharedNameSpace.emit(this.namespace);
The problem I am having is that I have not found a way to push new items into objSimpleType, without erasing the value of inputs, and if I manage to not erase the value of the inputs then the values of the form wont push.
this is how it looks.how the inputs work right now
This is what I need
How the inputs should be
I am still new to angular, and I would really appreciate the help.
Now that I have looked found the solution, I had two mistakes in the code above.
First my logic was not well executed, I needed to work with unique IDs,and call them dynamically.
Second, I was having trouble to call them , and after reading a lot, I found that I can call the parameters of a Json with brackets[].
"form.value['nameType' + this.i]" --Something like this is what i Needed.
I'm creating a prestashop 1.7.2.1 module. Prestashop comes with bootstrap 4 support.
I'm trying to use the from validation example from https://v4-alpha.getbootstrap.com/components/forms/#validation with the following code:
<div class="container">
<form>
<div class="form-group row has-success">
<label for="inputHorizontalSuccess" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control form-control-success" id="inputHorizontalSuccess" placeholder="name#example.com">
<div class="form-control-feedback">Success! You've done it.</div>
<small class="form-text text-muted">Example help text that remains unchanged.</small>
</div>
</div>
<div class="form-group row has-warning">
<label for="inputHorizontalWarning" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control form-control-warning" id="inputHorizontalWarning" placeholder="name#example.com">
<div class="form-control-feedback">Shucks, check the formatting of that and try again.</div>
<small class="form-text text-muted">Example help text that remains unchanged.</small>
</div>
</div>
<div class="form-group row has-danger">
<label for="inputHorizontalDnger" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control form-control-danger" id="inputHorizontalDnger" placeholder="name#example.com">
<div class="form-control-feedback">Sorry, that username's taken. Try another?</div>
<small class="form-text text-muted">Example help text that remains unchanged.</small>
</div>
</div>
</form>
</div>
using Pingendo 4 (bootstrap 4 desktop app editor) it works properly.
but when I add this code to my prestashop module all the inputs contains the validation icons repeated all through the input's width.
any ideas ?
PrestaShop's bootstrap CSS for these icons is being overriden by PrestaShop's own CSS.
When disabling the background property, it works fine.
You can modify the CSS and change background property to background-color.
I'm new to bootstrap and have a problem placing two input fields next to each other. I've searched on the internet (and bootstrap.com), but couldn't find the anser.
Code:
Result. But I need the input fields and button next to each other in one row:
I tried using columns... didn't work
You can follow : Display two fields side by side in a Bootstrap Form
<div class="input-group">
<input type="text" class="form-control" placeholder="Start"/>
<span class="input-group-addon">-</span>
<input type="text" class="form-control" placeholder="End"/>
You can try below code
<div class="container content">
<div class='row'>
<form role="form" class="form-horizontal" method="post">
<div class='col-xs-12 col-sm-4'>
<div class="form-group">
<input class="form-control" name="" placeholder="Search from this date">
</div>
</div>
<div class='col-xs-12 col-sm-4'>
<div class="form-group">
<input class="form-control" name="" placeholder="Search till this date">
</div>
</div>
<div class='col-xs-12'>
<div class="form-group">
<button class="btn btn-primary">Search</button>
</div>
</div>
<div class='col-xs-12'>
<div class="form-group">
Back
</div>
</div>
</form>
</div>
</div>
I need to have 3 form input fields in a row with their respective labels on the top. When the row wraps I want the labels to go with the corresponding input and stay on top. I can get the labels to appear to the left of the input fields just fine. Just not on top of the input. How can this be achieved
Working with colums should do the trick. Try something like this
<div class="row">
<div class="col-xs-3">
<label>Label 1</label>
<input type="text" class="form-control" placeholder=".col-xs-2">
</div>
<div class="col-xs-3">
<label>Label 2</label>
<input type="text" class="form-control" placeholder=".col-xs-3">
</div>
<div class="col-xs-3">
<label>Label 3</label>
<input type="text" class="form-control" placeholder=".col-xs-4">
</div>
</div>
The trick is to use col-md-4 because Bootstrap is built on a 12 col grid system. That way on small and extra small devices the coloumns automatically collapse down to a single row. Here's my pen.
http://www.bootply.com/Eb85k7lOAx
<div class="container">
<div class="row">
<div class="col-md-4">
<label>One</label>
<input class="form-control" placeholder=".col-md-4" type="text">
</div>
<div class="col-md-4">
<label>Two</label>
<input class="form-control" placeholder=".col-md-4" type="text">
</div>
<div class="col-md-4">
<label>Three</label>
<input class="form-control" placeholder=".col-md-4" type="text">
</div>
</div>
</div>
I have an array of models, all of them being instances of one class. I need to create a form which contains subforms corresponding to the models from the array.
Have to use CForm, because i've made a nice small extension of it, which can render subforms in CJuiTabs. In the code used at the moment POST-parameter names are wrong, because they get prefixed by the name of the class of a model from the array.
Below you can see a snippet of HTML-code generated. See those YPageInfo[...] named inputs? That's the problem - only one set of inputs with this prefix gets received by the server.
<div style="visibility:hidden"><input type="hidden" value="1" name="yform_20bd4d2c" id="yform_20bd4d2c" /></div>
<div class="row field_name">
<label for="YPageRevision_name">Name</label>
<input name="YPageRevision[name]" id="YPageRevision_name" type="text" maxlength="45" />
</div>
<div class="row field_parent_id">
<label for="YPageRevision_parent_id">Parent Id</label>
<input id="YPageRevision_parent_id_hidden" name="YPageRevision[parent_id]" type="hidden" /><input id="YPageRevision_parent_id" type="text" value="" name="autocomplete-field" />
</div>
<div id="yw1">
<ul>
<li>en</li>
<li>ru</li>
</ul>
<div id="enSubFormTab"><div class="row field_title">
<label for="YPageInfo_title" class="required">Title <span class="required">*</span></label>
<input name="YPageInfo[title]" id="YPageInfo_title" type="text" maxlength="256" />
</div>
<div class="row field_content">
<label for="YPageInfo_content" class="required">Content <span class="required">*</span></label>
<textarea name="YPageInfo[content]" id="YPageInfo_content"></textarea>
</div>
</div>
<div id="ruSubFormTab"><div class="row field_title">
<label for="YPageInfo_title" class="required">Title <span class="required">*</span></label>
<input name="YPageInfo[title]" id="YPageInfo_title" type="text" maxlength="256" />
</div>
<div class="row field_content">
<label for="YPageInfo_content" class="required">Content <span class="required">*</span></label>
<textarea name="YPageInfo[content]" id="YPageInfo_content"></textarea>
</div>
</div>
</div>
<div class="row buttons"><input name="submit" type="submit" value="Create" />
</div>
I found one way to do what I needed.
In the elements property of the sub-form there are some inputs declared. Each standard input element declared there is an instance of CFormInputElement, so it has the attributes property. Here you can set any HTML attribute, which will be rendered in the resulting input tag. I put my custom name attribute here, and change it in a loop, where i create sub-forms configuration items for the main CForm.
Maybe there is a better way?