Jak utworzyć pole wyboru w Angular8?

Jeśli do tej pory tworzyłeś aplikacje dowolnego typu, zdajesz sobie sprawę z ogromnego znaczenia, jakie ma pole wyboru. Nie tylko ułatwia wprowadzanie danych na dowolną platformę, ale także ułatwia szybkie sortowanie danych, ponieważ często jest dostarczana z funkcją listy. W tym artykule zobaczymy, jak utworzyć pole wyboru w angular8 w następującej kolejności:

• Utwórz pole wyboru w Angular8
• Sprawdzanie poprawności pola wyboru
• Dodawanie kontrolek formularza ASync

Utwórz pole wyboru w Angular8

Aby wyjaśnić kroki tworzenia checkboxa w Angular8, weźmy przykład, w którym mamy listę zamówień do wyboru i musimy to zrobić użytkownikowi w postaci checkboxa. W tym celu postępuj zgodnie z poniższym kodem.

const ordersData = [{id: 1, name: 'order 1'}, {id: 2, name: 'order 2'}, {id: 3, name: 'order 3'}, {id: 4, name: 'zamówienie 4'}]

W takim przypadku dane są już u nas obecne i dlatego skorzystaliśmy z udostępnionego powyżej kodu. W prawdziwym scenariuszu dane te byłyby najprawdopodobniej importowane za pośrednictwem interfejsu API.

W tym przykładzie możemy również skorzystać z formularzy reaktywnych, aby efekt końcowy był czystszy i wydajny. Aby zrozumieć, jak to zrobić, spójrz na poniższy przykład.

import {Component} from '@ angular / core' import {FormBuilder, FormGroup} from '@ angular / forms' @Component ({selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) eksportuj klasę AppComponent {form: FormGroup ordersData = [] konstruktor (private formBuilder: FormBuilder) {this.form = this.formBuilder.group ({orders: []})} Zatwierdź() { ... } }

W powyższym kodzie wykorzystaliśmy następujące.

1. FormGroups: który reprezentuje pojedynczą formę.
2. FormControl: który reprezentuje pojedynczy wpis w pojedynczym formularzu.
3. FormArray: który jest używany do reprezentowania kolekcji wszystkich FormControls.

W powyższym przykładzie możemy również skorzystać z usługi FormBuilder, aby utworzyć formularz, który będzie wyglądał mniej więcej tak.

czytaj i pisz plik excel w java

Zatwierdź

W powyższym przykładzie związaliśmy formularz z elementem formularza za pomocą [formGroup] = ”form”.

Teraz, gdy podstawowa forma została utworzona, dodajmy do niej trochę dynamiki poprzez użycie FormArray, jak pokazano poniżej.

import {Component} from '@ angular / core' import {FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn} from '@ angular / forms' @Component ({selector: 'my-app', templateUrl: './app.component .html ', styleUrls: [' ./app.component.css ']}) eksportuj klasę AppComponent {form: FormGroup ordersData = [{id: 100, name:' order 1 '}, {id: 200, name:' order 2 '}, {id: 300, name:' order 3 '}, {id: 400, name:' order 4 '}] konstruktor (private formBuilder: FormBuilder) {this.form = this.formBuilder.group ({ zamówienia: new FormArray ([])}) this.addCheckboxes ()} private addCheckboxes () {this.ordersData.forEach ((o, i) => {const control = new FormControl (i === 0) // if pierwszy element ustawiony na true, else false (this.form.controls.orders as FormArray) .push (control)})} submit () {const selectedOrderIds = this.form.value.orders .map ((v, i) = > v? this.orders [i] .id: null) .filter (v => v! == null) console.log (selectedOrderIds)}}

W powyższym przykładzie po każdej iteracji pętli utworzyliśmy nowy FormControl i pobraliśmy nasze polecenia z FormArray. Ustawiliśmy pierwszą kontrolkę na true i dlatego pierwsza kolejność została domyślnie odznaczona z listy.

Następnie musimy powiązać element FormArray z tym szablonem, aby uzyskać szczegółowe informacje o zamówieniu, które muszą zostać wyświetlone użytkownikowi.

{{ordersData [i] .name}} prześlij

Wynik:

statyczna funkcja składowa c ++

Sprawdzanie poprawności pola wyboru w Angular8

Spójrz na poniższy przykład, aby dowiedzieć się, jak sprawdzić poprawność pola wyboru.

{{ordersData [i] .name}} Należy wybrać co najmniej jedno zamówienie wyślij ... export class AppComponent {form: FormGroup ordersData = [...] constructor (private formBuilder: FormBuilder) {this.form = this.formBuilder .group ({orders: new FormArray ([], minSelectedCheckboxes (1))}) this.addCheckboxes ()} ...} function minSelectedCheckboxes (min = 1) {const validator: ValidatorFn = (formArray: FormArray) => { const totalSelected = formArray.controls // pobierz listę wartości pól wyboru (boolean) .map (control => control.value) // zsumuj liczbę zaznaczonych pól wyboru .reduce ((prev, next) => next? prev + next: prev, 0) // jeśli suma nie jest większa niż minimum, zwróć komunikat o błędzie return totalSelected> = min? null: {required: true}} return validator}

Wynik:

Dodawanie kontrolek formularza ASync

Teraz, gdy wiesz, jak dodawać dynamiczne pola wyboru, zobaczmy, jak możemy dodać ASync do tych formularzy.

import {Component} from '@ angular / core' import {FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn} from '@ angular / forms' import {of} from 'rxjs' @Component ({selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) eksportuj klasę AppComponent {form: FormGroup ordersData = [] konstruktor (prywatny formBuilder: FormBuilder) {this.form = this.formBuilder.group ({orders: new FormArray ([], minSelectedCheckboxes (1))}) // zamówienia synchroniczne this.ordersData = this.getOrders () this.addCheckboxes ()} private addCheckboxes () {this.ordersData. forEach ((o, i) => {const control = new FormControl (i === 0) // jeśli pierwszy element ma wartość true, else false (this.form.controls.orders as FormArray) .push (control)} )} getOrders () {return [{id: 100, name: 'order 1'}, {id: 200, name: 'order 2'}, {id: 300, name: 'order 3'}, {id: 400, name: 'order 4'}]} submit () {const selectedOrderIds = this.form.value.orders .map ((v, i) => v? This.ordersData [i] .id: null) .filter (v => v! == null) console.log (selectedOrderIds)}} ... import {of} z konstruktora 'rxjs' ... (private formBuilder: FormBuilder) {this.form = this. formBuilder.group ({orders: new FormArray ([], minSelectedCheckboxes (1))}) // zamówienia asynchroniczne (może to być wywołanie usługi http) of (this.getOrders ()). subscribe (orders => {this.ordersData = orders this.addCheckboxes ()}) // zamówienia synchroniczne // this.ordersData = this.getOrders () // this.addCheckboxes ()}

W ten sposób dotarliśmy do końca naszego artykułu. Teraz, gdy wiesz, jak dodać pole wyboru do swojego angular8, mamy nadzieję, że wykorzystasz go w codziennym kodowaniu.

Teraz, gdy znasz już bloki konstrukcyjne Angulara, zapoznaj się z przez Edureka. Angular to framework JavaScript, który służy do tworzenia skalowalnych, korporacyjnych i wydajnych aplikacji internetowych po stronie klienta. Przy wysokim stopniu wykorzystania frameworka Angular zarządzanie wydajnością aplikacji jest sterowane przez społeczność, pośrednio zapewniając lepsze możliwości zatrudnienia. Angular Certification Training ma na celu objęcie wszystkich tych nowych koncepcji dotyczących tworzenia aplikacji korporacyjnych.

różnica między rozszerzaniem a implementacją