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

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>

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) {...}

<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.

#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ě.

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

#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