Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <form class="">
- <div>
- <p>Name:</p>
- <input type="text">
- </div>
- <div class="link-input">
- <p>City:</p>
- <input type="text">
- </div>
- <button
- (click)="submitForm()">
- Submit
- </button>
- </form>
- <div class="col-md-6 col-md-offset-3">
- <h2>Login</h2>
- <form name="form" (ngSubmit)="f.form.valid && login()" #f="ngForm" novalidate>
- <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !username.valid }">
- <label for="username">Username</label>
- <input type="text" class="form-control" name="username" [(ngModel)]="model.username" #username="ngModel" required />
- <div *ngIf="f.submitted && !username.valid" class="help-block">Username is required</div>
- </div>
- <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !password.valid }">
- <label for="password">Password</label>
- <input type="password" class="form-control" name="password" [(ngModel)]="model.password" #password="ngModel" required />
- <div *ngIf="f.submitted && !password.valid" class="help-block">Password is required</div>
- </div>
- <div class="form-group">
- <button [disabled]="loading" class="btn btn-primary">Login</button>
- <img *ngIf="loading" src="loading.gif" />
- <a [routerLink]="['/register']" class="btn btn-link">Register</a>
- </div>
- </form>
- </div>
- import { Component, OnInit } from '@angular/core';
- import { Router, ActivatedRoute } from '@angular/router';
- import { AlertService, AuthenticationService } from '../services';
- @Component({
- templateUrl: './login.component.html'
- })
- export class LoginComponent implements OnInit {
- model: any = {};
- loading = false;
- returnUrl: string;
- constructor(
- private route: ActivatedRoute,
- private router: Router,
- private authenticationService: AuthenticationService,
- private alertService: AlertService) { }
- ngOnInit() {}
- login() {
- this.loading = true;
- this.authenticationService.login(this.model.username, this.model.password)
- .subscribe(
- data => {
- this.router.navigate([this.returnUrl]);
- },
- error => {
- this.alertService.error(error);
- this.loading = false;
- });
- }
- }
- <form role="form" [formGroup]="inputForm" novalidate>
- <div>
- <p>Name:</p>
- <input
- formControlName="name"
- type="text">
- </div>
- <div class="link-input">
- <p>City:</p>
- <input
- formControlName="city"
- type="text">
- </div>
- <button
- [disabled]="!inputForm.valid"
- (click)="submitForm()">
- </button>
- </form>
- import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
- export class InputComponent {
- public inputForm: FormGroup;
- constructor(private formBuilder: FormBuilder) {
- this.inputForm = this.formBuilder.group({
- name: new FormControl('', Validators.required),
- city: new FormControl('', Validators.required),
- });
- }
- //... codes..
- }
- import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
- export class InputComponent {
- public inputForm: FormGroup;
- constructor(private formBuilder: FormBuilder) {
- this.inputForm = this.formBuilder.group({
- name: new FormControl('', Validators.required, Validators.minLength(1)]),
- city: new FormControl('', Validators.required),
- });
- }
- }
- <form [formGroup]="inputForm" novalidate>
- <p>Name:</p>
- <input placeholder="Exercise" formControlName="name">
- <div class="errorMsg" *ngIf="inputForm.get('name').touched && inputForm.get('name').status === 'INVALID'">
- Name is required</div>
- <p>City:</p>
- <input placeholder="Exercise" formControlName="city">
- <button [disabled]="!inputForm.valid || !inputForm.touched (click)="submitForm()">Submit</button>
- </form>
- <form [formGroup]="myForm" (ngSubmit)="submitForm(myForm.value)">
- <div class="form-group" [ngClass]="{'has-error':!signinForm.controls['usermail'].valid && signinForm.controls['usermail'].touched}">
- <label>Email Address</label>
- <input class="form-control" type="email" [formControl]="signinForm.controls['usermail']">
- <span *ngIf="signinForm.controls['usermail'].hasError('required') && signinForm.controls['usermail'].touched && !signinForm.submitted" class="required pull-right">*Please Enter Email</span>
- <span *ngIf="signinForm.controls['usermail'].hasError('pattern') && signinForm.controls['usermail'].touched" class="required pull-right">*Invalid Email</span>
- </div>
- <div class="form-group" [ngClass]="{'has-error':!signinForm.controls['userpass'].valid && signinForm.controls['userpass'].touched}">
- <label>Password</label>
- <input class="form-control" type="password" [formControl]="signinForm.controls['userpass']" (focus)="showErrorMessage=false">
- <span *ngIf="signinForm.controls['userpass'].hasError('required') && signinForm.controls['userpass'].touched && !signinForm.submitted" class="required pull-right">*Please Enter Password</span>
- </div>
- <button type="submit" class="btn btn-pri mds_btn" [disabled]="!signinForm.valid">Login</button>
- </form>
- import { Component } from '@angular/core';
- import { FormGroup, FormBuilder, Validators } from '@angular/forms';
- import { Router } from '@angular/router';
- @Component({
- selector: 'app-login',
- templateUrl: './login.component.html',
- styleUrls: [ './login.component.scss' ]
- })
- export class LoginComponent {
- myForm: FormGroup;
- emailRegex: any = '^[a-z0-9]+(.[_a-z0-9]+)*@[a-z0-9-]+(.[a-z0-9-]+)*(.[a-z]{2,15})$';
- passRegex:any ='^(?=.*d)(?=.*[a-z])(?=.*[A-Z]).{6,}$';
- constructor(fb: FormBuilder) {
- this.myForm = fb.group({
- 'logmail': [ null, Validators.compose([ Validators.required, Validators.pattern(this.emailRegex) ]) ],
- 'logpass': [ null, Validators.compose([ Validators.required, Validators.pattern(this.passRegex) ]) ]
- });
- this.myForm.valueChanges.subscribe((form: any) => {
- });
- }
- submitForm(lgvalue: any) {
- //do logic here after submitting the form
- }
- }
Add Comment
Please, Sign In to add comment