Kulmamateriaalikomponenttien opetusohjelma: Lomakkeen ohjaimet, Lomakekenttä, Syöttö

Blogi

Kulmamateriaalikomponenttien opetusohjelma: Lomakkeen ohjaimet, Lomakekenttä, Syöttö

Tässä kulmamateriaalissa näytämme sinulle, kuinka voit käyttää kulmamateriaalin lomakeohjaimia, lomakekenttää ja syöttöä työskentelyesimerkkien kanssa. Kulmallinen materiaalilomakkeen ohjaus on olennainen osa erityisesti tietojen kanssa työskentelyssä. On olemassa joitakin kulmamateriaalilomakkeen säätimiä, kuten automaattinen täydennys, valintaruutu, päivämäärän valitsin, lomakekenttä, syöttö, valintanappi, valinta, liukusäädin ja liukukytkin. Tällä kertaa näytämme sinulle esimerkkejä kaikista kulmamateriaalimuodon säätimistä, lomakekentistä ja syötteistä.

Sisällysluettelo:

Tässä opetusohjelmassa tarvitaan seuraavat työkalut, kehykset ja kirjastot tai moduulit.

  1. Node.js
  2. Kulmikas 8
  3. Kulmikas materiaali
  4. Pääte (Linux/Mac) tai solmun komentorivi (Windows)
  5. Tekstieditori tai IDE (käytämme VSCodea)

Valmistautuminen

Niputamme kaikki nämä kulmamateriaalimuodon hallintaesimerkit yhteen sovellukseen. Tätä varten valmistamme kaikki tarvittavat Angular 8 -sovellukset ja kulmamateriaalin. Luomme nyt Angular 8 -sovelluksen, joka käyttää Angular CLI: tä ja joka tarvitsee Node.js: n ja NPM: n asentaakseen tai päivittääkseen sen. Varmista, että sinun on asennettava Node.js ja NPM ennen Angular CLI: n asentamista tai päivittämistä. Asenna tai päivitä kulmikas CLI kirjoittamalla tämä komento.

sudo npm install -g @angular/cli

Luo seuraavaksi uusi Angular 8 -sovellus käyttämällä Angular CLI: tä kirjoittamalla tämä komento.

ng new angular-material-form-controls

Tämä komento luo uuden Angular 8 -sovelluksen, jonka nimi on | _+_ | ja vastaa kaikkiin kysymyksiin Y -kirjaimella, niin Angular CLI asentaa automaattisesti tarvittavat NPM -moduulit. Kun olet valmis, siirry äskettäin luotuun Angular 8 -kansioon ja suorita Angular 8 -sovellus ensimmäistä kertaa.

angular-material-form-controls

Tämän –open -parametrien käyttäminen avaa Angular 8: n automaattisesti oletusselaimessasi. Tässä on Angular 8: n oletussivu.

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

Lisää tämä tyyli | _+_ |.

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

Esimerkki lomakekentästä ulkoasun ominaisuudella

Tämä esimerkki näyttää lomakekentän ulkoasun ominaisuuden käytön. Voit kommentoida edellistä esimerkkiä ja lisätä nämä HTML -tunnisteet kohtaan | _+_ |.

Netflix. fi/aktivoi
src/app/app.component.scss

Kelluva tarra ja piilota pakollinen merkki

On ominaisuuksia, joilla voidaan määrittää kelluva tarratila ja piilottaa tarvittava merkki (asterix). Tässä esimerkkejä heille.

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

Jos haluat määrittää float -tarran maailmanlaajuisesti, voit lisätä tämän MAT_LABEL_GLOBAL_OPTIONS -tuonnin kohtaan | _+_ |.

mistä ostaa mft kryptoa
src/app/app.component.html

Lisää se @NgModule -palveluntarjoajille.

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

Poista kaikki [floatLabel] -ominaisuudet kustakin, joka käyttää yleistä kokoonpanoa.

Näytä vihjeet

Tämä on esimerkki vihjeetunnisteista, joissa käytetään komponenttia, joka näyttää vihjeen tietyssä paikassa vasemmalle ja oikealle kohdistusmäärityksen avulla.

Last Name Nickname Family Name

Näytä virheilmoitukset

Tässä esimerkissä näytetään, kuinka virheilmoitus näytetään, jos jotain vikaa kirjoitettaessa tai täytettäessä syötettä. Virheilmoitukset näkyvät tulon alapuolella ja piilotetaan oletusarvoisesti, jos virheitä ei ole havaittu. Tässä esimerkissä käytetään Angular FormControl -tarkistajaa, avaa ja muokkaa | _+_ | lisää sitten tämä tuonti.

src/app/app.module.ts

Lisää muuttuja FormControlista ja validoijasta.

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

Lisää toiminto, joka näyttää virheilmoitukset.

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

Palaa HTML -koodiin, kommentoi edellistä esimerkkiä ja lisää tämä esimerkki virheilmoituksista.

react-native-web konekirjoitus
Estimate: {(20 - input.value?.length) } Fill with the valid email ^

Etuliite/jälkiliite tai Ennen/jälkeen -tarra

Lomakekenttä voi näyttää tarroja ennen syöttöä ja sen jälkeen. Etuliite tai ennen matPrefix -määritteen ja jälkiliitteen käyttöä tai matSuffixin käytön jälkeen. Tässä esimerkki.

src/app/app.component.ts

Lomakekentän muotoilu

Tyyli voi ohittaa tai muuttaa muuttamalla mat-lomakekentän ja .mat-lomakekentän tyylejä. Voit ohittaa sen avaamalla ja muokkaamalla | _+_ | lisää sitten nämä tyylit.

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

Syöttöesimerkkejä

Kulmamateriaalin syöttö tai teksti-alue, joka on merkitty matInput-merkinnällä ja joka on lisätty tavalliseen HTML-syöttöön ja tekstialueeseen. Tämä saa HTML-syötteen ja tekstialue toimimaan sisällä.

Basic Input ja TextArea Esimerkki

Tämä esimerkki on Angular Material matInputin peruskäyttö HTML -syötteessä ja tekstialueella, joka on kääritty.

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

Esimerkki tuetuista syöttötyypeistä

Tämä esimerkki on tuetut karttatyypit Syöttö, kuten teksti, väri, päivämäärä, päivämäärä-paikallinen, sähköposti, kuukausi, numero, salasana, haku, puh, aika, url ja viikko.

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

Syötä mukautetulla ErrorStateMatcherilla

Virheellinen tulon käyttö voi heittää virheen, joka näkyy tulon alareunassa mukautetun ErrorStateMatcherin avulla. Virhesanoman käyttö on sallittu. Jos haluat käyttää ErrorStateMatcheria, lisää/muokkaa tuontia | _+_ |.

{{getErrorMessage()}}

Lisää tämä ErrorStateMatcher -luokka ennen pääkomponenttia @.

Rp. .00

Lisää tämä FormControl -validoija ja aseta ErrorStateMatcher AppComponent -hakasulkeeseen.

src/app/app.component.scss

Takaisin | _+_ | lisää sitten tämä esimerkki ErrorStateMatcherin käytöstä.

yahoo bellsouthin sähköpostiasetukset
mat-form-field.mat-form-field { font-size: 16px; color: blue; background-color: burlywood; border: solid 1px #c0c0ff; }

Se on esimerkki kulmamateriaalin lomakkeen ohjaimista, lomakekentästä ja syötteestä. Kuten tavallista, saat täydelliset lähdekoodit meidän GitHub .

Jos et halua tuhlata aikaasi oman käyttöliittymän tai budjetin suunnitteluun palkkaamalla web-suunnittelija, Angular Templates on paras paikka. Joten nopeuta käyttöliittymän verkkokehitystä premium-palvelulla Kulmamallit . Valitse malli käyttöliittymäprojektillesi tässä .

#muotoinen #web-kehitys #javascript