I'm working on reactive-forms in angular 7.I have 3 components and each component has a form.based on if,components switches.I'm not using routes ,just hiding and showing components.if we reach back to previous component.then angular-material input have a red border.How to remove that border
dashboard.component.ts(parent)
<section>
<mat-card class="auth-card">
<mat-card-content>
<div [ngStyle]="componentConst.showAcc ? {'display':'block'} : {'display':'none'}" id="acc ">
<app-account (showStep)="onNextStepShow($event)"></app-account>
</div>
<div [ngStyle]="componentConst.showC ? {'display':'block'} : {'display':'none'}" id="cred ">
<app-cred (showNextStep)="onNext($event)" (showStip)="onShowPrev()"></app-cred>
</div>
appaccount.ts
<form [formGroup]="providerForm" (ngSubmit)="onSubmit()">
<div class="form-control">
<mat-form-field>
<input type="text" placeholder="Provider" matInput [matAutocomplete]="auto"
formControlName="providerName">
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="onSelectionChanged($event)">
<mat-option *ngFor="let providerItem of providersData" [value]="providerItem.providerName">
{{providerItem.providerName}}</mat-option>
<mat-option *ngIf="providersData.length===0 && isSearching!='false'" disabled>Begin typing to search...
</mat-option>
</mat-autocomplete>
<mat-error *ngIf="submitted && formControl.providerName.errors">
<mat-error *ngIf="formControl.providerName.errors.required"> * Provider is required</mat-error>
</mat-error>
</mat-form-field>
</div>
<div class="button-section">
<button mat-button [disabled]="!isSelected">Next</button>
</div>
</form>
In the Switching time you should reset a form. so in that time reset but form field are touch then you will get a red border because of the validation. add this code in the switching between between form event.
this.providerForm.reset()
providerForm.markAsPristine();
providerForm.markAsUntouched();
Related
I'm new to Angular and now I'm working on small task that required scroll to the error field which is not filled while submitted.
I'm getting error at formGroup if I added ngxScrollToFirstInvalid which is working fine in my past projects. Below are my project snippet. I have imported properly in module.ts
<form [formGroup]="myForm" #companyForm="ngForm" novalidate method="POST" autocomplete="off" style="margin-top: 5%" ngx ngxScrollToFirstInvalid>
<div class="candScroll">
<div class="row">
<div class="col-lg col-md col-sm">
<mat-form-field class="size" appearance="outline">
<!-- <mat-label for="company">Company</mat-label> -->
<label class="required">Company</label>
<input matInput formControlName="company" type="text"
[ngClass]="{ 'is-invalid': sub && f['company'].errors }" />
<mat-error *ngIf="sub && f['company'].invalid || f['company'].touched">
<div *ngIf="sub && f['company'].errors" class="invalid-feedback"> company name is required</div>
<span class="text-danger">Please input Company Name</span>
</mat-error>
</mat-form-field>
</div>
...
I tried all steps from https://www.npmjs.com/package/#ismaestro/ngx-scroll-to-first-invalid🔗. And I need to get scroll the page to the error field while submitted (on clicked) if user had not filled the field.
I am having the following Piece of Code:
<div class="custom-control custom-checkbox" *ngFor="let airline of airlines">
<input type="checkbox" (click)="airLineFilter($event)" value="{{airline}}" name="{{airline}}" class="custom-control-input">
<label class="custom-control-label" for="{{airline}}">{{airline}}</label>
</div>
When this was without *ngFor (click) event was working fine like this:
<div class="custom-control custom-checkbox">
<input type="checkbox" id="americanAir" (click)="airLineFilter($event)" value="American Airlines" name="airlines" class="custom-control-input">
<label class="custom-control-label" for="americanAir">American Airlines</label>
</div>
But after using *ngFor click event is not getting triggered. Is there something I can do to fix this.?
After going through many options I finally found the solution.
It is due to Id attribute of checkbox and for attribute of label.
When I changed my code to something like this it worked:
<div class="custom-control custom-checkbox" *ngFor="let airline of airlines;let i = $index;">
<input type="checkbox" id="airline{{i}}" (click)="airLineFilter($event)" value="{{airline}}" name="{{airline}}" class="custom-control-input">
<label class="custom-control-label" for="airline{{i}}">{{airline}}</label>
</div>
I try to use in my project only flex-layout and avoid vanilla css. I cannot figure out how to center hohorizontally angular material stepper and get good view. I check margin: 0 auto; and it works properly. Here is my code:
<mat-vertical-stepper [linear]="true" #stepper fxLayoutAlign="center center" fxLayout="column">
<mat-step>
<form>
<ng-template matStepLabel>
Fill out ballot name
</ng-template>
<mat-form-field>
<input matInput placeholder="Ballot name">
</mat-form-field>
<div>
<button mat-flat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step>
<form fxLayout="column">
<ng-template matStepLabel>
Select start and end time
</ng-template>
<mat-form-field>
<input matInput [matDatepicker]="pickerStart" placeholder="Choose a start date">
<mat-datepicker-toggle matSuffix [for]="pickerStart"></mat-datepicker-toggle>
<mat-datepicker #pickerStart></mat-datepicker>
</mat-form-field>
<mat-form-field>
<input matInput [matDatepicker]="pickerEnd" placeholder="Choose a end date">
<mat-datepicker-toggle matSuffix [for]="pickerEnd"></mat-datepicker-toggle>
<mat-datepicker #pickerEnd></mat-datepicker>
</mat-form-field>
<div fxLayoutGap="5px">
<button mat-flat-button matStepperPrevious>Back</button>
<button mat-flat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step>
<form>
<ng-template matStepLabel>
Enter a description of ballot
</ng-template>
<mat-form-field>
<textarea matInput placeholder="Description"></textarea>
</mat-form-field>
<div fxLayoutGap="5px">
<button mat-flat-button matStepperPrevious>Back</button>
<button mat-flat-button (click)="stepper.reset()">Reset</button>
<button mat-flat-button>Confirm</button>
</div>
</form>
</mat-step>
</mat-vertical-stepper>
Screenshot of the problem:
Each step is a different width, so the result you see is expected. When you horizontally center vertically stacked elements, wider elements will appear outside narrower elements. What you want is to center the whole stepper, and leave the steps left aligned:
<div fxLayoutAlign="center center" fxLayout="column">
<mat-vertical-stepper [linear]="true" #stepper>
...
</mat-vertical-stepper>
</div>
StackBlitz
I have the following form and I need that after the user clicks Save, an error message shows next to the radio group that is required (but no radio selected). I tried the following but it doesn't show the message at all.
<form #formList="ngForm" (ngSubmit)="Save(formList)">
<div *ngFor="let item of data">
<p>{{item.name}}</p>
<input type="radio" name="{{item.id}}" [value]="1" [(ngModel)]="item.isSelected" required>Foo
<input type="radio" name="{{item.id}}" [value]="2" [(ngModel)]="item.isSelected">Bar
<div *ngIf="formList.controls.item?.id.required">
The radio is required!
</div>
</div>
<button type="submit">Save</button>
</form>
Try this code
<form #formList="ngForm" (ngSubmit)="Save(formList)">
<div *ngFor="let item of data">
<p>{{item.name}}</p>
<input type="radio" name="{{item.id}}" [value]="1" [(ngModel)]="item.isSelected" required>Foo
<input type="radio" name="{{item.id}}" [value]="2" [(ngModel)]="item.isSelected">Bar
<div *ngIf="!formList.form.valid">
The radio is required!
</div>
</div>
<button type="submit">Save</button>
</form>
So I'm building a web application using Jquery Mobile and Phonegap. The app was working fine until I removed some input fields and drop down menus which became obsolete.
The problem now is that when I click on the last input field of the page & the ios keyboard activates, the footer bar is no longer fixed and there is a white gap between the footer bar and the ios keypad. When the keypad hides again I see the full page but the white gap is above the footer.
This doesn't seem to be a problem on the Android platform so I'm wondering if it is a CSS issue. Help is most certainly welcome. Here's the page code in question...
<div data-role="page" data-theme="f" id="">
<div data-role="header" class="ui-state-persist">
<h1>text</h1>
</div>
<div data-role="content">
<label for="">Text</label>
<input type="text" name="text" id="" value="" class="input-field required"/>
<label for="">Text</label>
<input type="text" name="" id="" value="" class="input-field required"/>
<label for="">Text</label>
<input type="text" name="" id="" value="" class="input-field required"/>
<label for="">Text</label>
<input type="" name="" id="" value="" class="input-field required"/>
</div>
<div data-role="footer" class="ui-state-persist" style="min-height:42px;">
Done
</div>
Try the following code (using jQuery Mobile version 1.2.0):
<div data-role="page" data-theme="f" id="quickquote_insured">
<div data-role="header" class="ui-state-persist">
<h1>Contact Details</h1>
</div>
<div data-role="content">
<label for="quickquote-insured_initials">Initials:</label>
<input type="text" name="quickquote-insured_initials" id="quickquote-insured_initials" value="" class="input-field required"/>
<label for="quickquote-insured_surname">Surname:</label>
<input type="text" name="quickquote-insured_surname" id="quickquote-insured_surname" value="" class="input-field required"/>
<label for="quickquote-insured_phone_number">Mobile number:</label>
<input type="text" name="quickquote-insured_phone_number" id="quickquote-insured_phone_number" value="" class="input-field required"/>
<label for="quickquote-insured_email_address">e-Mail address:</label>
<input type="email" name="quickquote-insured_email_address" id="quickquote-insured_email_address" value="" class="input-field required"/>
<br>
</div>
<div data-role="footer" class="ui-state-persist" style="min-height:42px;">
Done
</div>
</div>
I know it may look simple, but I just added a <br> just under your email input field.
I think the problem is that, since your footer is "static", you need to "fill" your page.
For example, if you have few fields on your page and if you don't "fill" your page, you'll get the following result:
Hope this helps.