• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

prograd-org/lab-angular-material-design-forms

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

prograd-org/lab-angular-material-design-forms

开源软件地址(OpenSource Url):

https://github.com/prograd-org/lab-angular-material-design-forms

开源编程语言(OpenSource Language):


开源软件介绍(OpenSource Introduction):

Image description

ProGrad Lab | Angular Forms - Material Design

Learning Goals

After this lesson, you will be able to:

  • Create a static Angular application with Angular CLI.
  • Build an Angular application with forms.
  • Performing validation in angular forms.
  • Validators in forms.

Requirements

  • Fork this repo.
  • Clone this repo.

Submission

Upon completion, run the following commands:

$ git add .
$ git commit -m "done"
$ git push origin master

Navigate to your repo and create a pull request from your master branch to the original repository's master branch.

In the pull request name, add your Prograd id, name, and last name separated by a dash "-".

Deliverables

You need to generate the starter code and fill it with the necessary code to satisfy the requirements described below.

Starter Code

To generate the starter code, follow the steps given below

  • To create a new application,
    • Open your ubuntu or cmd terminal and execute the following command
      • ng new app-name
      • for example, ng new super-wars
    • To create a new component, execute the command
      • ng generate component component-name
      • example, ng generate component contacts

How to run

  • To run the project go to your ubuntu terminal or VScode editor
    • open the ubuntu or cmd terminal or inside the vscode editor
    • run the command following command
    • ng serve --open or ng serve -o

Instructions

Once you clone your project,

cd lab-angular-prograd-contacts
run the below command
npm install --save-dev @angular-devkit/build-angular

Progression #1: Forms - Material Design

In this we are going to build a form using material design. Let us try to build one.

  • Create two component - login and registration.
  • Import the following module inside app.module.ts.
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AngularMaterialModule } from './angular-material.module';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
  • Write the validation code for login form inside login.component.ts and validation code for registration inside registration.component.ts.
  • To bind the form values along with your validation, try using the below code ngClass snippet in your html file inside the input tag.
<mat-form-field class="example-full-width">
          <mat-label>Email</mat-label>
          <input matInput [formControl]="emailFormControl" [errorStateMatcher]="matcher"
            placeholder="Ex. [email protected]">
          <mat-error *ngIf="emailFormControl.hasError('email') && !emailFormControl.hasError('required')">
            Please enter a valid email address
          </mat-error>
          <mat-error *ngIf="emailFormControl.hasError('required')">
            Email is <strong>required</strong>
          </mat-error>
        </mat-form-field>
  • Validate all the fields given in the form.

Expected Output:

output output-validation

Happy Coding ProGrad ❤️




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap