Како створити поље за потврду у Ангулар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- едурека

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

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

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

Излаз:

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

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

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

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

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

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