Kaip sukurti žymimąjį laukelį „Angular8“?

Jei iki šiol kūrėte bet kokio tipo programas, jau žinote didelę žymimojo langelio reikšmę. Tai ne tik palengvina duomenų įvedimą bet kuriai platformai, bet ir palengvina greitą duomenų rūšiavimą, nes jie dažnai pateikiami kartu su sąrašo funkcija. Šiame straipsnyje pamatysime, kaip sukurti žymimąjį langelį kampu8 tokia seka:

• Sukurti žymimąjį laukelį kampe8
• Patvirtinamas žymimasis laukelis
• „ASync“ formos valdiklių pridėjimas

Sukurti žymimąjį laukelį kampe8

Norėdami paaiškinti žymimojo langelio „Angular8“ sukūrimo veiksmus, paimkime pavyzdį, kur turime sąrašą užsakymų, iš kurių galime rinktis, ir turime tai padaryti vartotojui žymės langelio forma. Norėdami tai padaryti, vadovaukitės toliau pateiktu kodu.

const orderData = [{id: 1, name: 'order 1'}, {id: 2, name: 'order 2'}, {id: 3, name: 'order 3'}, {id: 4, name: '4 užsakymas'}]

Tokiu atveju duomenys jau yra pas mus, todėl mes pasinaudojome aukščiau nurodytu kodu. Realiame pasaulyje šie duomenys greičiausiai būtų importuojami per API.

Šiame pavyzdyje taip pat galime naudoti reaktyvias formas, kad galutinis rezultatas būtų švaresnis ir efektyvesnis. Norėdami suprasti, kaip tai padaryti, pažvelkite į toliau pateiktą pavyzdį.

importuoti {komponentą} iš '@ angular / core' importuoti {FormBuilder, FormGroup} iš '@ angular / forms' @Component ({selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) eksporto klasė „AppComponent“ {forma: FormGroup orderData = [] konstruktorius (privatus formBuilder: FormBuilder) {this.form = this.formBuilder.group ({užsakymai: []})} Pateikti() { ... } }

Ankstesniame kode mes pasinaudojome šiais būdais.

1. „FormGroups“: kuris atstovauja vienai formai.
2. „FormControl“: kuris reiškia vieną įrašą į vieną formą.
3. „FormArray“: kuris naudojamas visų „FormControls“ rinkinių atvaizdavimui.

Pirmiau pateiktame pavyzdyje taip pat galime naudoti „FormBuilder“ paslaugą, kad sukurtume formą, kuri atrodys maždaug taip.

pl sql kūrėjo pamoka pradedantiesiems

Pateikti

Ankstesniame pavyzdyje mes susiejome formą su formos elementu, naudodami [formGroup] = ”forma”.

Dabar, kai pagrindinė forma buvo sukurta, pridėkime tam tikrą dinamiškumą naudodami „FormArray“, kaip parodyta žemiau.

importuoti {komponentą} iš '@ angular / core' importuoti {FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn} iš '@ angular / forms' @Component ({selector: 'my-app', templateUrl: './app.component .html ', styleUrls: [' ./app.component.css ']}) eksporto klasė „AppComponent“ {forma: FormGroup orderData = [{id: 100, vardas:' order 1 '}, {id: 200, name:' orderis 2 '}, {id: 300, name:' order 3 '}, {id: 400, name:' order 4 '}] konstruktorius (private formBuilder: FormBuilder) {this.form = this.formBuilder.group ({ užsakymai: new FormArray ([])}) this.addCheckboxes ()} private addCheckboxes () {this.ordersData.forEach ((o, i) => {const control = new FormControl (i === 0) // if pirmas elementas nustatytas į true, dar neteisingas (this.form.controls.orders as FormArray) .push (kontrolė)})} pateikti () {const selectedOrderIds = this.form.value.orders .map ((v, i) = > v? this.orders [i] .id: null). filtras (v => v! == null) console.log (selectedOrderIds)}}

Ankstesniame pavyzdyje po kiekvieno ciklo kartojimo sukūrėme naują „FormControl“ ir perėmėme užsakymus iš „FormArray“. Mes nustatėme, kad pirmoji kontrolė būtų teisinga, taigi pirmoji tvarka pagal numatytuosius nustatymus buvo pašalinta iš sąrašo.

Po to turime susieti „FormArray“ elementą su šiuo šablonu, kad gautume konkrečią užsakymo informaciją, kuri turi būti rodoma vartotojui.

Pateikti {{orderData [i] .name}}

Išvestis:

kintamas ir nekintamas java

Pažymėkite žymimąjį laukelį kampe8

Peržiūrėkite toliau pateiktą pavyzdį, kad sužinotumėte, kaip patvirtinti žymimąjį laukelį.

{{orderData [i] .name}} Būtina pasirinkti bent vieną užsakymą pateikti ... eksportuoti klasę „AppComponent“ {forma: FormGroup orderData = [...] konstruktorius (privatus formBuilder: FormBuilder) {this.form = this.formBuilder .group ({orderiai: nauja FormArray ([], minSelectedCheckboxes (1))}) this.addCheckboxes ()} ...} funkcija minSelectedCheckboxes (min = 1) {const validator: ValidatorFn = (formArray: FormArray) => { const totalSelected = formArray.controls // gauti žymimųjų laukelių reikšmių sąrašą (loginė). žemėlapis (kontrolė => kontrolė. vertė) // susumuoti pažymėtų langelių skaičių. sumažinti ((ankstesnis, kitas) => kitas? ankstesnis + kitas: ankstesnis, 0) // jei suma nėra didesnė už minimumą, grąžinkite klaidos pranešimą return totalSelected> = min? null: {būtina: tiesa}} grąžinti tikrintuvą}

Išvestis:

„ASync“ formos valdiklių pridėjimas

Dabar, kai žinote, kaip pridėti dinaminius žymimuosius langelius, pažiūrėkime, kaip galime pridėti „ASync“ prie šių formų.

importuoti {komponentą} iš „@ angular / core“ importuoti {FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn} iš „@ angular / forms“ importuoti {iš} iš „rxjs“ @Component ({selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) eksporto klasė „AppComponent“ {forma: FormGroup orderData = [] konstruktorius (privatus formBuilder: FormBuilder) {this.form = this.formBuilder.group ({užsakymai: nauja FormArray ([], minSelectedCheckboxes (1))}) // sinchroniniai užsakymai this.ordersData = this.getOrders () this.addCheckboxes ()} private addCheckboxes () {this.ordersData. forEach ((o, i) => {const control = new FormControl (i === 0) // jei pirmasis elementas nustatytas į true, dar klaidingas (this.form.controls.orders kaip FormArray) .push (control)} )} getOrders () {return [{id: 100, name: 'order 1'}, {id: 200, name: 'order 2'}, {id: 300, name: 'order 3'}, {id: 400, vardas: '4 užsakymas'}]} pateikti () {const selectedOrderIds = this.form.value.orders .map ((v, i) => v? This.ordersData [i] .id: null) .filter (v => v! == null) console.log (selectedOrderIds)}} ... importuoti {iš} iš 'rxjs' ... konstruktoriaus (privatus formBuilder: FormBuilder) {this.form = this. formBuilder.group ({užsakymai: nauja FormArray ([], minSelectedCheckboxes (1))}) // asinchroniniai užsakymai (gali būti http paslaugos iškvietimas) (this.getOrders ()). užsiprenumeruokite (užsakymai => {this.ordersData = užsako this.addCheckboxes ()}) // sinchroniniai užsakymai // this.ordersData = this.getOrders () // this.addCheckboxes ()}

Tuo mes pasiekėme savo straipsnio pabaigą. Dabar, kai žinote, kaip pridėti žymimąjį langelį prie „angular8“, tikimės, kad jį naudosite kasdieniniame kodavime.

Dabar, kai žinote „Angular“ statybinius elementus, patikrinkite pateikė Edureka. „Angular“ yra „JavaScript“ sistema, naudojama kurti keičiamo dydžio, įmonės ir našumo kliento žiniatinklio programas. Kadangi „Angular Framework“ pritaikymas yra didelis, programos našumo valdymas yra netiesiogiai skatinamas geresnių darbo galimybių. „Angular Certification Training“ tikslas yra aptarti visas šias naujas įmonių programų kūrimo koncepcijas.

kryžminės naršyklės bandymai seleno žiniatinklio tvarkyklėje