Tutoriaal vir hoekmateriaalkomponente: vormbeheer, vormveld, invoer

Blog

Tutoriaal vir hoekmateriaalkomponente: vormbeheer, vormveld, invoer

In hierdie hoekmateriaal sal ons u wys hoe u die kontroles, vormveld en invoer van hoekmateriaal kan gebruik, saam met die werkvoorbeelde. 'N Hoekige materiaalvormbeheer is 'n noodsaaklike komponent, veral as u met die data werk. Daar is 'n paar kontroles vir hoekvormige materiaal, soos outo -voltooiing, boks, datumkieser, vormveld, invoer, radioknoppie, kies, skuifbalk en skyfie -skakelaar. Hierdie keer wys ons u voorbeelde vir al die kontroles van hoekmateriaalvorms, vormveld en invoer.



INHOUDSOPGAWE:

Die volgende gereedskap, raamwerke en biblioteke of modules word benodig vir hierdie tutoriaal.

  1. Node.js
  2. Hoekig 8
  3. Hoekige materiaal
  4. Terminal (Linux/Mac) of Node Command Line (Windows)
  5. Teksredakteur of IDE (ons gebruik VSCode)

Voorbereiding

Ons sal al hierdie voorbeelde van Angular Material Form Controls in een toepassing saamvoeg. Hiervoor sal ons alle vereiste Angular 8 -toepassings en hoekmateriaal voorberei. Nou skep ons 'n Angular 8 -app met Angular CLI wat Node.js en NPM benodig om dit te installeer of by te werk. Maak seker dat u Node.js en NPM moet installeer voordat u Angular CLI installeer of opdateer. Tik hierdie opdrag om 'n Angular CLI te installeer of op te dateer.



sudo npm install -g @angular/cli

Skep vervolgens 'n nuwe Angular 8 -app met Angular CLI deur hierdie opdrag in te voer.

ng new angular-material-form-controls

Die opdrag sal 'n nuwe Angular 8 -app skep met die naam | _+_ | en slaag alle vrae as 'Y', dan installeer die Angular CLI outomaties die vereiste NPM -modules. Nadat u klaar is, gaan u na die pasgemaakte Angular 8 -lêergids en voer die Angular 8 -app vir die eerste keer uit.



angular-material-form-controls

As u die oop parameters gebruik, word die Angular 8 outomaties in u standaardblaaier oopgemaak. Hier lyk die hoekige 8 standaardbladsy.

cd ./angular-material-form-controls ng serve --open

Voeg hierdie style by | _+_ |.

https://s3-ap-southeast-1.amazonaws.com/djamblog/article-181019205345.png'> element.
 Option 

Vormveld met voorkoms -eiendom Voorbeeld

Hierdie voorbeeld wys u die gebruik van die vormvorm -voorkoms -eienskap. U kan kommentaar lewer op die vorige voorbeeld en hierdie HTML -etikette byvoeg in | _+_ |.

hoe om 'n wagwoord op minecraft te verander
src/app/app.component.scss

Swaai etiket en verberg vereiste merker

Daar is eienskappe om die swewende etiketmodus op te stel en die vereiste merker (asterix) weg te steek. Hier is die voorbeelde vir hulle.

.form-container { display: flex; flex-direction: column; } .form-container > * { width: 100%; }

Om die vlotetiket wêreldwyd te konfigureer, kan u hierdie invoer van MAT_LABEL_GLOBAL_OPTIONS in | _+_ |.

waar om mft crypto te koop
src/app/app.component.html

Voeg dit by @NgModule -verskaffers.

Email Address: mail_outline Input the fully qualified email address

Phone Number: phone Phone number with Country code

Username: person_outline Use unique username

Password lock Min 8 char 1 number and 1 alpha

Verwyder alle [floatLabel] -eienskappe in elk wat 'n globale opset gebruik.

Toon wenke

Dit is 'n voorbeeld van wenke wat etikette gebruik met 'n komponent wat 'n aanduiding vertoon met 'n spesifieke posisie links en regs met behulp van die lyn -kenmerk.

Last Name Nickname Family Name

Wys foutboodskappe

Hierdie voorbeeld sal u wys hoe u 'n foutboodskap kan vertoon as daar iets verkeerd is terwyl u die invoer invoer of invul. Die foutboodskappe word onder die invoer vertoon en word as standaard versteek as daar geen foute is nie. Hierdie voorbeeld gebruik Angular FormControl validator, daarvoor kan u oopmaak en wysig | _+_ | voeg dan hierdie invoer by.

src/app/app.module.ts

Voeg 'n veranderlike van die FormControl en die validator by.

import { MAT_LABEL_GLOBAL_OPTIONS } from '@angular/material/core';

Voeg 'n funksie by om die foutboodskappe te vertoon.

providers: [ { provide: MAT_LABEL_GLOBAL_OPTIONS, useValue: {float: 'always'} } ],

Terug na die HTML, lewer kommentaar op die vorige voorbeeld en voeg hierdie voorbeeld van foutboodskappe by.

kyk of 'n blokkie in die javascript aangeskakel is
Estimate: {(20 - input.value?.length) } Fill with the valid email ^

Voorvoegsel/agtervoegsel of voor/na -etiket

Die vormveld kan etikette voor en na die invoer wys. Voorvoegsel of voordat u matPrefix -kenmerk en agtervoegsel gebruik, of nadat u matSuffix gebruik het. Hier is die voorbeeld.

src/app/app.component.ts

Styl van die vormveld

Die styl kan oorheers of verander deur die style van mat-vorm-veld en .mat-vorm-veld te verander. Om dit te ignoreer, maak oop en wysig | _+_ | voeg dan hierdie style by.

import { FormControl, Validators } from '@angular/forms';

Invoer voorbeelde

Die invoer of teksgebied van Angular Material gemerk deur matInput wat bygevoeg is tot standaard HTML-invoer en teksarea. Dit laat die HTML-invoer en die teksarea binne werk.

Basiese invoer- en teksgebiedvoorbeeld

Hierdie voorbeeld is die basiese gebruik van Angular Material mat Invoer binne HTML -invoer en tekstarea wat ingedraai word.

email = new FormControl('', [Validators.required, Validators.email]);

Ondersteunde invoertipes Voorbeeld

Hierdie voorbeeld is die ondersteunde tipes vir invoer van mapinvoer, soos teks, kleur, datum, datetime-local, e-pos, maand, nommer, wagwoord, soek, tel, tyd, url en week.

getErrorMessage() { return this.email.hasError('required') ? 'You must enter a value' : this.email.hasError('email') ? 'Not a valid email' : ''; }

Voer in met 'n pasgemaakte ErrorStateMatcher

Met mislukte invoer kan 'n fout onderaan die invoer verskyn met behulp van aangepaste ErrorStateMatcher. Die gebruik van 'n foutboodskap word toegelaat deur. Om ErrorStateMatcher te gebruik, voeg/verander hierdie invoer by die | _+_ |.

{{getErrorMessage()}}

Voeg hierdie klas van ErrorStateMatcher by die hoof @Component.

Rp. .00

Voeg hierdie FormControl -bekragtigder by en installeer ErrorStateMatcher binne die AppComponent -hakie.

src/app/app.component.scss

Terug na | _+_ | voeg dan hierdie voorbeeld van ErrorStateMatcher -gebruik by.

installeer mysql met homebrew
mat-form-field.mat-form-field { font-size: 16px; color: blue; background-color: burlywood; border: solid 1px #c0c0ff; }

Dat dit die voorbeeld is van hoekmateriaalvormkontroles, vormveld en invoer. Soos gewoonlik kan u volledige bronkodes in ons kry GitHub .

As u nie u tyd wil mors nie, ontwerp u eie voorkant of u begroting om deur 'n webontwerper te huur, dan is Angular Templates die beste plek om na te gaan. Dus, bespoedig u front-end webontwikkeling met premium Hoekige sjablone . Kies u sjabloon vir u front-end-projek hier .

#hoekig #webontwikkeling #javascript