Skip to content

A
Angular Countries Assignment
Commit d45d5eaf authored by Alex Segers's avatar Alex Segers
Browse files
Options

(@asegers) Improve form styles

parent 0794192c
Pipeline #1620 failed with stage
    Hide whitespace changes
    Inline Side-by-side
    Showing with 20 additions and 23 deletions
    src/app/pages/account/account.component.html
    View file @ d45d5eaf
    <mat-card [style.width.px]="400" [style.margin-left]="'auto'" [style.margin-top.px]="40"> <mat-card [style.width.px]="400" [style.height.%]="90" [style.margin-left]="'auto'" [style.margin-top.px]="40">
    <mat-card-header> <mat-card-header>
    <mat-card-title> <mat-card-title><h4>Create An Account</h4></mat-card-title>
    <h4>Create An Account</h4>
    </mat-card-title>
    </mat-card-header> </mat-card-header>
    <mat-card-content class="register-container"> <mat-card-content class="register-container">
    <form [formGroup]="accountForm" (ngSubmit)="onSubmit()" fxLayout="column" fxLayoutGap="32px"> <form [formGroup]="accountForm" (ngSubmit)="onSubmit()" fxLayout="column" fxLayoutGap="15px">
    <mat-form-field appearance="fill"> <mat-form-field appearance="outline">
    <mat-label>Username</mat-label> <mat-label>Username</mat-label>
    <input matInput formControlName="username" autocomplete="username" required> <input matInput formControlName="username" autocomplete="username" required>
    <mat-icon matSuffix>account_circle</mat-icon> <mat-icon matSuffix>account_circle</mat-icon>
    <mat-error *ngIf="accountForm.controls.username.errors">Must be at least 4 characters</mat-error> <mat-error *ngIf="accountForm.controls.username.errors">Must be at least 4 characters</mat-error>
    </mat-form-field> </mat-form-field>
    <mat-form-field appearance="fill"> <mat-form-field appearance="outline">
    <mat-label>Email</mat-label> <mat-label>Email</mat-label>
    <input matInput formControlName="email" type="email" autocomplete="email" required> <input matInput formControlName="email" type="email" autocomplete="email" required>
    <mat-icon matSuffix>email</mat-icon> <mat-icon matSuffix>email</mat-icon>
    <mat-error *ngIf="accountForm.controls.email.errors">Invalid email address</mat-error> <mat-error *ngIf="accountForm.controls.email.errors">Invalid email address</mat-error>
    </mat-form-field> </mat-form-field>
    <mat-form-field appearance="fill"> <mat-form-field appearance="outline">
    <mat-label>Password</mat-label> <mat-label>Password</mat-label>
    <input matInput formControlName="password" autocomplete="new-password" required> <input matInput formControlName="password" [type]="hidePassword ? 'password' : 'text'" autocomplete="new-password" required>
    <mat-icon matSuffix>lock</mat-icon> <mat-icon matSuffix (click)="hidePassword = !hidePassword">{{hidePassword ? 'visibility_off' : 'visibility'}}</mat-icon>
    <mat-error *ngIf="accountForm.controls.password.errors"> <mat-error *ngIf="accountForm.controls.password.errors">
    Must be at least 8 characters & Must be at least 8 characters &
    should contain one number, one character, and one special character should contain one number, one character, and one special character
    </mat-error> </mat-error>
    <mat-hint>Reveal password by clicking the eye icon</mat-hint>
    </mat-form-field> </mat-form-field>
    <div> <div>
    <button type="submit" [disabled]="accountForm.invalid || loading" mat-flat-button color="primary" > <button type="submit" [disabled]="accountForm.invalid || loading" mat-flat-button color="primary" >
    ......
    src/app/pages/account/account.component.ts
    View file @ d45d5eaf
    ...@@ -20,6 +20,7 @@ export class AccountComponent { ...@@ -20,6 +20,7 @@ export class AccountComponent {
    ]), ]),
    }); });
    loading = false; loading = false;
    hidePassword = true;
    onSubmit(): void { onSubmit(): void {
    this.accountForm.disable(); this.accountForm.disable();
    this.loading = true; this.loading = true;
    ......
    src/app/pages/contact/contact.component.html
    View file @ d45d5eaf
    <mat-card [style.width.px]="400" [style.margin-left]="'auto'" [style.margin-top.px]="40"> <mat-card [style.width.px]="400" [style.height.%]="90" [style.margin-left]="'auto'" [style.margin-top.px]="40">
    <mat-card-header> <mat-card-header>
    <mat-card-title> <mat-card-title><h4>Send Us A Message</h4></mat-card-title>
    <h4>Send Us A Message</h4>
    </mat-card-title>
    </mat-card-header> </mat-card-header>
    <mat-card-content class="register-container"> <mat-card-content class="register-container">
    <form [formGroup]="contactForm" (ngSubmit)="onSubmit()" fxLayout="column" fxLayoutGap="20px"> <form [formGroup]="contactForm" (ngSubmit)="onSubmit()" fxLayout="column" fxLayoutGap="15px">
    <mat-form-field appearance="fill"> <mat-form-field appearance="outline">
    <mat-label>First Name</mat-label> <mat-label>First Name</mat-label>
    <input matInput formControlName="firstName" autocomplete="given-name" required> <input matInput formControlName="firstName" autocomplete="given-name" required>
    <mat-icon matSuffix>account_circle</mat-icon> <mat-icon matSuffix>badge</mat-icon>
    <mat-error *ngIf="contactForm.controls.firstName.errors">Required</mat-error> <mat-error *ngIf="contactForm.controls.firstName.errors">Required</mat-error>
    </mat-form-field> </mat-form-field>
    <mat-form-field appearance="fill"> <mat-form-field appearance="outline">
    <mat-label>Last Name</mat-label> <mat-label>Last Name</mat-label>
    <input matInput formControlName="lastName" autocomplete="family-name" required> <input matInput formControlName="lastName" autocomplete="family-name" required>
    <mat-icon matSuffix>account_circle</mat-icon>
    <mat-error *ngIf="contactForm.controls.lastName.errors">Required</mat-error> <mat-error *ngIf="contactForm.controls.lastName.errors">Required</mat-error>
    </mat-form-field> </mat-form-field>
    <mat-form-field appearance="fill"> <mat-form-field appearance="outline">
    <mat-label>Email</mat-label> <mat-label>Email</mat-label>
    <input matInput formControlName="email" type="email" autocomplete="email" required> <input matInput formControlName="email" type="email" autocomplete="email" required>
    <mat-icon matSuffix>email</mat-icon> <mat-icon matSuffix>email</mat-icon>
    <mat-error *ngIf="contactForm.controls.email.errors">Invalid email address</mat-error> <mat-error *ngIf="contactForm.controls.email.errors">Invalid email address</mat-error>
    </mat-form-field> </mat-form-field>
    <mat-form-field appearance="fill"> <mat-form-field appearance="outline">
    <mat-label>Comments</mat-label> <mat-label>Comments</mat-label>
    <textarea matInput formControlName="comments" autocomplete="off"> <textarea matInput formControlName="comments" autocomplete="off" rows="4" cols="50">
    </textarea> </textarea>
    <mat-icon matSuffix>lock</mat-icon> <mat-icon matSuffix>insert_comment</mat-icon>
    </mat-form-field> </mat-form-field>
    <div> <div>
    <button type="submit" [disabled]="contactForm.invalid || loading" mat-flat-button color="primary" > <button type="submit" [disabled]="contactForm.invalid || loading" mat-flat-button color="primary" >
    ......
    Markdown is supported
    0% or
    You are about to add 0 people to the discussion. Proceed with caution.
    Finish editing this message first!
    Please register or to comment