How to Apply form validation inside data table in angular2 - validation

I am trying to apply required field validation for text-box which is inside data table template.
Required field validation message pop up properly but as there is no form tag i was not able to check form.valid in component.
Please find below code:
<data-table id="user-grid"(reload)="reloadItems($event) [items]="userData">
<data-table-column [header]="'UserName'">
<template #dataTableCell let-item="item">
<span>
<input type="text" [(ngModel)]="item.UserName" class="form-control" required #UserName="ngModel" name="UserName"/>
<span class="text-danger" *ngIf="(UserName.errors != null && UserName.errors.required && (UserName.dirty))">
Please enter user name.
</span>
</span>
</template>
</data-table-column>
<data-table-column [header]="'Action'" >
<template #dataTableCell let-item="item">
<a title="Save" (click)="save(item)" class="btn green btn-sm">
</a>
</template>
</data-table-column>
</data-table>
Any help will be appreciable.

Put the datatable element inside the form tag having ngForm. It would fire the form validations.
Please see below:
<form #testform="ngForm">
<data-table>
</data-table>
</form>

Related

How do I get the values of all the selected check box from thymeleaf in spring boot

Data is being populated from database
<div th:each="comm : ${listBothComm}">
<label class="list-group-item d-flex gap-2"> <input
checked="" class="form-check-input flex-shrink-0"
th:field="*{comm_cd}" th:value="${comm.comm_cd}" type="checkbox"><span
th:text="${comm.comm_nm}"> </span>
</label>
</div>
The answer to your question is provided in this post:
https://stackoverflow.com/a/72300493/15730570
The answer is for simple checkbox which passes one value back to controller. To pass multiple values, you will need to to tweak your thymeleaf code accordingly.

Input value doesn't hold the value after clicking button

I'm trying to type invoice number as input type i.e. 123456789
After I click Print Record button, the value of invoice number disappears like this:
Aslo I have wrote
<div class="form-group row">
<label for="invoice_no" class="col-sm-2 col-form-label">Inovice Number</label>
<div class="col-sm-10">
<input type="text" class="form-control col-sm-4" name="InvNumber" id="InvNumber" value="{{request()->input('InvNumber')}}">
</div>
</div>
And the Print button looks like:
<div class="form-group row">
<div class="col-sm-12 dol-12" >
<button class="btn btn-secondary float-right" onclick="printDiv()">Print Record</button>
</div>
And printDiv() function is:
<script type="text/javascript" language="javascript">
function printDiv(divName) {
var printContents = document.getElementById('printableArea').innerHTML;
document.body.innerHTML = printContents;
window.print();
}
Clicking a submit button will submit the form it is in.
Presumably, your form's action is the current URL, so it reloads the page.
The new page doesn't have the data in the form fields that you had typed into the previous page.
If you don't want to submit the form, use the type attribute to change the <button> from its default of submit.
As per the documenation, if you don't specify type of button it assumes it as submit button that is why your form is being submitted by default.
Add type="button" in your button
<button type="button" class="btn btn-secondary float-right" onclick="printDiv()">Print Record</button>
submit: The button submits the form data to the server. This is the
default if the attribute is not specified for buttons associated with
a form, or if the attribute is an empty or invalid value.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

How to use multidimensional checkbox v-model in vuejs

Suppose i have some subjects which has conditions and groups.
How can i load those first time and checked in update mood in vuejs?
<div v-for="(sub, Index) in subjects">
<b>{{ sub }} </b>
<label v-for="(subconlist) in sub['subCon']">
<input type="checkbox"
:value="subconlist.id"
:key="subconlist.id"
>
<span>{{subconlist.name}} </span>
</label>
<label v-for="clsgrlist in sublist['acGr']">
<input type="checkbox">
<span>{{clsgrlist.academic_group_name}} </span>
</label>
</div>
<button #click="saveOrUpdate()" >Save </button>
</div>
fiddle here
the table where i will save it : sub_id,condition_ids,group_ids
I have to save data based on checked value in the table with comma separated.
How can i get checkbox checked if it already found in the table, i mean when update?
I need to get subjectconditon or group ids basis on each subject when click on save button.

Angular material 2 share reactive form between components

I have the following component template
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<section>
<mat-form-field>
<input matInput formControlName="firstName" placeholder="First name" />
</mat-form-field>
</section>
<child-component [form]="form"></child-component>
<button type="submit" mat-raised-button color="primary">
<span>Submit</span>
</button>
</form>
And the following child component template
<section [formGroup]="form">
<mat-form-field>
<input matInput formControlName="emailAddress" placeholder="Email address" />
</mat-form-field>
</section>
Both fields are defined using reactive approach in the parent component and set as required.
When submitting the form, only the field inside the parent component has class mat-form-field-invalid and is shown in red.
Both fields appear as invalid at FormControl instance though.
I have created the following stackblitz to reproduce the issue
https://stackblitz.com/edit/angular-material2-issue-7x45bp
If I'm not mistaken, your invalid form fields will only appear in red after they have been marked as touched, which you can force programtically on form submit if you so wish (just not so elegant, Reactive Forms - mark fields as touched).
Your required fields are missing the asterisk that usually exists next to the form field name to visually indicate that the field is required. To add that just add required="true" or alternatively [required]="someFunctionThatChecksFieldHasRequiredValidatorInFormGroup(fieldName)"
The easiest way to do this is to pass in the FormControl instead of the form:
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<section>
<mat-form-field>
<input matInput formControlName="firstName" placeholder="First name" />
</mat-form-field>
</section>
<child-component [childControl]="form.get('emailAddress')"></child-component>
<button type="submit" mat-raised-button color="primary">
<span>Submit</span>
</button>
</form>
<section>
<mat-form-field>
<input matInput [formControl]="childControl" placeholder="Email address" />
</mat-form-field>
</section>
This is actually better for component re-usability anyway (if you also make placeholder a property).
Otherwise, you would probably need to have your child component implement ControlValueAccessor.

How to do autocomplete validation in Angular2?

I have been trying to implement an auto-complete to an input in my form in angular2. I want to show second hidden div if the input is invalid. Could you help me how to do that please?
<div class="form-group">
<div *ngSwitchCase="'organisation'">
<label [attr.for]="parameter.ObjectID" [innerHtml]="parameter.paramLabel"> </label>
<input [id]='parameter.ObjectID' class="form-control" type="text" [(ngModel)]="parameter.value" (keyup)="filter()" (change)="filter()" (blur)="filter()" [required]="parameter.mandatory" name="mandatory" #mandatory="ngModel">
<div *ngIf="companyNames.length > 0">
<ul *ngFor="let item of filteredCompanyList">
<li>
<a (click)="select(item)">{{item}}</a>
</li>
</ul>
</div>
<div [hidden]="!parameter.mandatory || mandatory.valid || mandatory.pristine" class="alert alert-danger">Please do not leave this field blank</div>
<div [hidden]="temp(mandatory)" class="alert alert-danger">The organisation entered was either not found or does not subscribe to the product</div>
</div>
The second hidden div will be displayed if your function temp() returns false.
All your checks (input valid?) you have to do in this function.
UPDATE:
Just use this [hidden]="filteredCompanyList.length > 0" to show/hide your div.

Resources