Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <form class="example-form" novalidate (ngSubmit)='user_signup(user)' [formGroup]='user'>
- <div class="row align-items-center">
- <div class="col-md-1">
- <label><img src="assets/imgs/mobile-icon.svg"/></label>
- </div>
- <div class="col-md-11">
- <mat-form-field class="example-full-width" >
- <input matInput type='number' placeholder="Phone Number:" maxlength="10" name="phone" formControlName="phone" *ngIf="( user.get('phone').hasError('required') || user.get('phone').hasError('minlength') || user.get('phone').hasError('maxlength'))&& user.get('phone').touched" required/>
- </mat-form-field>
- <div>
- <div class="error" *ngIf="user.get('phone').hasError('required') && user.get('phone').touched">
- Phone number Required
- </div>
- <div class="error" *ngIf="user.get('phone').hasError('minlength') && user.get('phone').touched">
- Min 10 digit
- </div>
- <div class="error" *ngIf="user.get('phone').hasError('maxlength') && user.get('phone').touched">
- Max 10 digit
- </div>
- </div>
- </div>
- </div>
- </form>
- import { Component, OnInit } from '@angular/core';
- import { ServicesService } from '../service/services.service';
- import { FormGroup , FormControl , Validators } from '@angular/forms';
- @Component({
- selector: 'app-register',
- templateUrl: './register.component.html',
- styleUrls: ['./register.component.scss']
- })
- export class RegisterComponent implements OnInit {
- user: FormGroup;
- constructor( public restapi:ServicesService) {
- this.user = new FormGroup({
- password: new FormControl('', [Validators.required, Validators.minLength(6)]),
- email: new FormControl('', [Validators.required,Validators.email]),
- phone: new FormControl('', [Validators.required, Validators.minLength(10),Validators.maxLength(10)]),
- });
- }
- ngOnInit() {
- }
- }
- import { BrowserModule } from '@angular/platform-browser';
- import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
- import { AppRoutingModule } from './app-routing.module';
- import { AppComponent } from './app.component';
- import { ComponentsComponent } from './components/components.component';
- import { ReactiveFormsModule } from '@angular/forms';
- import { HttpClientModule } from '@angular/common/http';
- import { MDBBootstrapModule, WavesModule, ButtonsModule, CardsFreeModule } from 'angular-bootstrap-md';
- import { MatTabsModule, MatDialogModule } from '@angular/material';
- import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
- import { MatFormFieldModule} from '@angular/material';
- /*angular material compoment*/
- import { MatInputModule } from '@angular/material/input';
- import {MatButtonModule} from '@angular/material/button';
- import { RouterModule, Routes } from '@angular/router';
- import {MatSlideToggleModule} from '@angular/material/slide-toggle';
- import {MatTableModule} from '@angular/material/table';
- import {MatSelectModule} from '@angular/material/select';
- import {MatExpansionModule} from '@angular/material/expansion';
- import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
- import {MatSnackBarModule} from '@angular/material/snack-bar';
- import {MatSliderModule} from '@angular/material/slider';
- import {MatBadgeModule} from '@angular/material/badge';
- /*component */
- import { LoginComponent } from './login/login.component';
- import { RegisterComponent } from './register/register.component';
- import { FleshScreenComponent } from './flesh-screen/flesh-screen.component';
- /* Service */
- import { ServicesService } from './service/services.service';
- @NgModule({
- declarations: [
- AppComponent,
- ComponentsComponent,
- LoginComponent,
- RegisterComponent,
- FleshScreenComponent
- ],
- imports: [
- BrowserModule,
- AppRoutingModule,
- BrowserAnimationsModule,
- MatInputModule,
- MatButtonModule,
- MDBBootstrapModule.forRoot(),
- ReactiveFormsModule ,
- HttpClientModule ,
- MatFormFieldModule
- ],
- schemas: [ NO_ERRORS_SCHEMA ],
- providers: [ServicesService],
- bootstrap: [AppComponent]
- })
- export class AppModule { }
Add Comment
Please, Sign In to add comment