Angular2 - Validace dynamických formulářů – JavaScript, AJAX, jQuery – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu

Angular2 - Validace dynamických formulářů – JavaScript, AJAX, jQuery – Fórum – Programujte.comAngular2 - Validace dynamických formulářů – JavaScript, AJAX, jQuery – Fórum – Programujte.com

 

Toto vlákno bylo označeno za vyřešené — příspěvek s řešením.
Doomista+1
Stálý člen
24. 8. 2017   #1
-
0
-

Ahoj,

snažím se dát dohromady v angularu formulář, který má pár statických polí k vyplnění a pár dynamických (uživatel si může nastavit, kolik jich bude a přes *ngFor se následně vygenerují ve formuláři). Všechna pole podléhají validaci a v případě, že nevyhovují, tak bych rád docílil toho, aby byl submit button disablovaný.

Angular bohužel nedávno dostal update, který zapřínil, že pokud člověk využívá FormGroup a má input s ngModelem, tak daný input musí být pojmenovaný. V template ale, pokud je mi známo, není úplně možné si dynamicky generovat jména. Na stackoverflow jsem našel radu k AngularJS, která doporučila si generované inputy obalit novou FormGroup a pojmenovat tu. Nedá se říct, že by to pomohlo, koneckonců je to akorát přesunutí problému někam jinam. Má otázka tedy zní - Jak mohu zajistit validaci FormGroup, která má dynamicky generované inputy? Ideální by bylo template-driven řešení.

Díky za pomoc, přikládám ještě template kód formuláře.

<form #f="ngForm" (ngSubmit)="createProfile()">
    <div class="row align-items-center mb-2">
        <div class="col-sm-2">
            <b>Name:</b>
        </div>
        <div class="col-sm-10">
            <input type="text" [(ngModel)]="profile.name" class="form-control"
            name="profileName" required pattern="[a-zA-Z_][a-zA-Z_\-0-9]*">
        </div>
    </div>

    <div class="channelBox">
        <div *ngFor="let c of profile.channels">
            <form name="innerForm">
                <div class="row align-items-center mb-2">
                    <div class="col-sm-2">
                        <b>Name:</b>
                    </div>
                    <div class="col-sm-10">
                        <input type="text" [(ngModel)]="c.name" class="form-control" required
                        pattern="[a-zA-Z_][a-zA-Z_\-0-9]*" name="channelName">
                    </div>
                </div>
            </form>
        </div>
    </div>
    
    <div>
        <button class="btn btn-success" type="submit" [disabled]="!f.valid">
            Create profile
        </button>
        <button class="btn btn-default" (click)="d('reason')">Cancel</button>
    </div>
</form>
Nahlásit jako SPAM
IP: 2001:67c:1220:809::93e5:9...–
Na vše stačí iostream...
peter
~ Anonymní uživatel
3619 příspěvků
24. 8. 2017   #2
-
0
-

Nevim, jak se dynamicky generuji tve inputy, ale je mozne v html pouzit pole 

<input name="aaa[bbb]">
php: $_POST['aaa']['bbb']
js: aaa['bbb'] nebo aaa.bbb

Je mozne pouzit prazdne pole

<input name="aaa[]">
<input name="aaa[]">
php: $_POST['aaa'][0], $_POST['aaa'][1]
js: aaa[0], aaa[1]

asi by to melo jit i zkombinovat
aaa[bbb][]
Jakoze mas skupinu tvoje inputy, aaa, a podskupinu treba pohlavi bbb, a pohlavi muz/zena, 0, 1 radio buttony. Pak sledujes treba
if (form[0]['mojebuttony']['pohlavi'][0].checked) {...}

Nahlásit jako SPAM
IP: 2001:718:2601:258:69f6:41...–
peter
~ Anonymní uživatel
3619 příspěvků
24. 8. 2017   #3
-
0
-

<form> <form> ... </form> </form>
Mimochodem, toto ti sice bude fungovat, ale jinak je to nesmysl davat formy do sebe. Pokud jsi nekdy pouzival klavesnici, tak vis, ze enter form odesila. Takhle nemas jistotu, ktery se vlastne na enter odesle.

Treba, kdyz mas logovaci stranku. Tam das nejdriv focus na policko name. Uzivatel stranku otevre a muze hned psat, vyplnovat name. Pak zmackne tab (tabelator), presune se do policka password. Pak zmackne enter a uz se loguje. Podobne chovani ocekavam i u ostatnich formularu. Pokud ho nejde vyplnovat pres klavesnici, tak je to drbacka, kdy vyplnuji jednou rukou a druhou mam na mysi a preklikavam. To pak proklinam autora nebo odejdu ze stranky.

Nahlásit jako SPAM
IP: 2001:718:2601:258:69f6:41...–
Doomista+1
Stálý člen
24. 8. 2017   #4
-
0
-

#3 peter
Tohle není php, tohle je angular. Do name atributu nemůžu narvat proměnnou, bude to považovaný za plainstring. Dynamicky se to generuje pomocí direktivy *ngFor. Submit formu se nikam nepošle, akorát spustí v javascriptu funkci, která data odesílá asynchroně.

Nahlásit jako SPAM
IP: 2001:67c:1220:809::93e5:9...–
Na vše stačí iostream...
peter
~ Anonymní uživatel
3619 příspěvků
24. 8. 2017   #5
-
0
-

Hej, tak zkus google. Tam pouzivaji ng-repeat

https://stackoverflow.com/questions/14514461/how- 

<label ng-repeat="fruit in fruits">
  <!--
    - Use `value="{{fruit.name}}"` to give the input a real value, in case the form gets submitted
      traditionally

    - Use `ng-checked="fruit.selected"` to have the checkbox checked based on some angular expression
      (no two-way-data-binding)

    - Use `ng-model="fruit.selected"` to utilize two-way-data-binding. Note that `.selected`
      is arbitrary. The property name could be anything and will be created on the object if not present.
  -->
  <input
    type="checkbox"
    name="selectedFruits[]"
    value="{{fruit.name}}"
    ng-model="fruit.selected"
  > {{fruit.name}}
</label>

---

app.controller('ObjectArrayCtrl', ['$scope', 'filterFilter', function ObjectArrayCtrl($scope, filterFilter) {

  // Fruits
  $scope.fruits = [
    { name: 'apple',    selected: true },
    { name: 'orange',   selected: false },
    { name: 'pear',     selected: true },
    { name: 'naartjie', selected: false }
  ];

  // Selected fruits
  $scope.selection = [];

  // Helper method to get selected fruits
  $scope.selectedFruits = function selectedFruits() {
    return filterFilter($scope.fruits, { selected: true });
  };

  // Watch fruits for changes
  $scope.$watch('fruits|filter:{selected:true}', function (nv) {
    $scope.selection = nv.map(function (fruit) {
      return fruit.name;
    });
  }, true);
}]);

do-i-bind-to-list-of-checkbox-values-with-angularjs

Nahlásit jako SPAM
IP: 2001:718:2601:258:69f6:41...–
Doomista+1
Stálý člen
25. 8. 2017   #6
-
0
-

#5 peter
Asi se spíš budu muset sám zeptat na stacku, takovéhle thready jsem našel, ale to je všechno pro angularjs, ne pro angular2 a mezi nima je propastný rozdíl

Nahlásit jako SPAM
IP: 2001:67c:1220:809::93e5:9...–
Na vše stačí iostream...
Řešení
Doomista+1
Stálý člen
25. 8. 2017   #7
-
0
-
Vyřešeno Nejlepší odpověď

Stack pomohl, řešení:

https://stackoverflow.com/questions/45875413/validation-of-dynamic-angular2-forms

Nahlásit jako SPAM
IP: 2001:67c:1220:809::93e5:9...–
Na vše stačí iostream...
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 9 hostů

Podobná vlákna

Validace RSS — založil Blujacker

Validace mailu — založil tribalcz

Validace css — založil kall_ell_001

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032020 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý