Како створити поље за потврду у Ангулар8?

Ако сте до сада стварали било коју врсту апликација, већ сте свесни огромног значаја који поље за потврду има. Не само да олакшава унос података на било коју платформу, већ и олакшава брзо сортирање података јер се често испоручују у комплету са функцијом листе. У овом чланку видећемо како да креирамо поље за потврду у ангулар8 у следећем низу:

• Направите поље за потврду у Ангулар8
• Потврђивање поља за потврду
• Додавање контрола АСинц обрасца

Направите поље за потврду у Ангулар8

Да бисмо објаснили кораке стварања поља за потврду у Ангулар8, узмимо пример где имамо листу налога које можемо да изаберемо, а то морамо да додамо кориснику у облику поља за потврду. Да бисте то урадили, следите доњи код.

цонст ордерсДата = [{ид: 1, наме: 'ордер 1'}, {ид: 2, наме: 'ордер 2'}, {ид: 3, наме: 'ордер 3'}, {ид: 4, наме: 'поруџбина 4'}]

У овом случају, подаци су већ присутни код нас и зато смо искористили горе наведени код. У стварном сценарију, ови подаци би се највероватније увозили преко АПИ-ја.

шта је апликација у салесфорце-у

У овом примеру такође можемо користити реактивне форме како бисмо крајњи резултат учинили чишћим и ефикаснијим. Да бисте разумели како се то ради, погледајте пример испод.

импорт {Цомпонент} из '@ ангулар / цоре' импорт {ФормБуилдер, ФормГроуп} из '@ ангулар / формс' @Цомпонент ({селецтор: 'ми-апп', темплатеУрл: './апп.цомпонент.хтмл', стилеУрлс: ['./апп.цомпонент.цсс']}) класа извоза АппЦомпонент {форм: ФормГроуп ордерсДата = [] конструктор (приватни формБуилдер: ФормБуилдер) {тхис.форм = тхис.формБуилдер.гроуп ({налога: []})}} прихвати() { ... } }

У горњем коду смо искористили следеће.

1. ФормГроупс: који представља један облик.
2. ФормЦонтрол: што представља један унос у један облик.
3. ФормАрраи: која се користи за представљање колекције свих ФормЦонтролс.

У горњем примеру такође можемо користити услугу ФормБуилдер да бисмо креирали образац који ће изгледати отприлике овако.

прихвати

У горњем примеру, повезали смо образац са елементом обрасца помоћу [формГроуп] = ”образац”.

Сад кад је основни образац створен, додајмо му мало динамичности употребом ФормАрраи као што је приказано доле.

плитка вс дубока копија Јава

увоз {Компонента} из '@ ангулар / цоре' импорт {ФормБуилдер, ФормГроуп, ФормАрраи, ФормЦонтрол, ВалидаторФн} из '@ ангулар / формс' @Цомпонент ({селецтор: 'ми-апп', темплатеУрл: './апп.цомпонент .хтмл ', стилеУрлс: [' ./апп.цомпонент.цсс ']}) класа извоза АппЦомпонент {форм: ФормГроуп ордерсДата = [{ид: 100, наме:' ордер 1 '}, {ид: 200, наме:' налог 2 '}, {ид: 300, наме:' ордер 3 '}, {ид: 400, наме:' ордер 4 '}] конструктор (приватни формБуилдер: ФормБуилдер) {тхис.форм = тхис.формБуилдер.гроуп ({ поруџбине: нови ФормАрраи ([])}) тхис.аддЦхецкбокес ()} приватни аддЦхецкбокес () {тхис.ордерсДата.форЕацх ((о, и) => {цонст цонтрол = нев ФормЦонтрол (и === 0) // иф прва ставка постављена на труе, иначе фалсе (тхис.форм.цонтролс.ордерс ас ФормАрраи) .пусх (цонтрол)})} субмит () {цонст селецтедОрдерИдс = тхис.форм.валуе.ордерс .мап ((в, и) = > в? тхис.ордерс [и] .ид: нулл) .филтер (в => в! == нулл) цонсоле.лог (селецтедОрдерИдс)}}

У горњем примеру, након сваке итерације петље створили смо нови ФормЦонтрол и преузели своје наруџбине из ФормАрраи. Прву контролу поставили смо на тачно и стога је прва наруџба подразумевано означена са листе.

После тога морамо да вежемо елемент ФормАрраи за овај образац како бисмо добили одређене информације о поруџбини које треба да се прикажу кориснику.

{{ордерсДата [и] .наме}} пошаљи

Излаз:

Потврђивање потврдног поља у Ангулар8

Погледајте пример у наставку да бисте сазнали како потврдити поље за потврду.

{{ордерсДата [и] .наме}} Најмање једна поруџбина мора бити изабрана субмит ... екпорт цласс АппЦомпонент {форм: ФормГроуп ордерсДата = [...] конструктор (приватни формБуилдер: ФормБуилдер) {тхис.форм = тхис.формБуилдер .гроуп ({налога: нови ФормАрраи ([], минСелецтедЦхецкбокес (1))}) тхис.аддЦхецкбокес ()} ...} функција минСелецтедЦхецкбокес (мин = 1) {цонст валидатор: ВалидаторФн = (формАрраи: ФормАрраи) => { цонст тоталСелецтед = формАрраи.цонтролс // добијемо листу вредности поља за потврду (боолеан) .мап (цонтрол => цонтрол.валуе) // укупан број означених поља за потврду .редуце ((прев, нект) => нект? прев + следеће: прев, 0) // ако укупан износ није већи од минимума, вратите поруку о грешци ретурн тоталСелецтед> = мин? нулл: {рекуиред: труе}} ретурн валидатор}

Излаз:

Додавање контрола АСинц обрасца

Сада када знате како да додате динамичке оквире за потврду, да видимо како можемо да додамо АСинц у ове обрасце.

увоз {Компонента} из '@ ангулар / цоре' импорт {ФормБуилдер, ФормГроуп, ФормАрраи, ФормЦонтрол, ВалидаторФн} из '@ ангулар / формс' импорт {оф} из 'ркјс' @Цомпонент ({селецтор: 'ми-апп', темплатеУрл: './апп.цомпонент.хтмл', стилеУрлс: ['./апп.цомпонент.цсс']}) класа извоза АппЦомпонент {форм: ФормГроуп ордерсДата = [] конструктор (приватни формБуилдер: ФормБуилдер) {тхис.форм = тхис.формБуилдер.гроуп ({налога: нови ФормАрраи ([], минСелецтедЦхецкбокес (1))}) // синхрони налози тхис.ордерсДата = тхис.гетОрдерс () тхис.аддЦхецкбокес ()} привате аддЦхецкбокес () {тхис.ордерсДата. форЕацх ((о, и) => {цонст цонтрол = нев ФормЦонтрол (и === 0) // ако је прва ставка постављена на труе, иначе фалсе (тхис.форм.цонтролс.ордерс ас ФормАрраи) .пусх (цонтрол)} )} гетОрдерс () {ретурн [{ид: 100, наме: 'ордер 1'}, {ид: 200, наме: 'ордер 2'}, {ид: 300, наме: 'ордер 3'}, {ид: 400, име: 'поруџбина 4'}]} субмит () {цонст селецтедОрдерИдс = тхис.форм.валуе.ордерс .мап ((в, и) => в? Тхис.ордерсДата [и] .ид: нулл) .филтер (в => в! == нулл) цонсоле.лог (селецтедОрдерИдс)}} ... импорт {оф} фром 'ркјс' ... цонструцтор (привате формБуилдер: ФормБуилдер) {тхис.форм = тхис. формБуилдер.гроуп ({налога: нови ФормАрраи ([], минСелецтедЦхецкбокес (1))}) // асинхронизовани налози (може бити позив за услугу хттп) од (тхис.гетОрдерс ()). претплатите се (налози => {тхис.ордерсДата = наређује тхис.аддЦхецкбокес ()}) // синхрони налози // тхис.ордерсДата = тхис.гетОрдерс () // тхис.аддЦхецкбокес ()}

Овим смо дошли до краја нашег чланка. Сада када знате како да додате поље за потврду вашем ангулар8, надамо се да ћете га користити у свакодневном кодирању.

Сада када знате блокове Ангулар-а, погледајте Едурека. Ангулар је ЈаваСцрипт оквир који се користи за креирање скалабилних, пословних и перформанси веб апликација на страни клијента. Како је усвајање Ангулар фрамеворк-а високо, управљање учинком апликације индиректно води заједници, што подстиче боље могућности за посао. Обука за сертификацију са кутом има за циљ да обухвати све ове нове концепте око развоја апликација у предузећу.

како направити динамички низ у јави