Dynamic nested form

Multi-choices question form

Dynamic Template driven

• Form is binded to a QMulti model
• new propositions can be added via button or enter key
• propositions can be removed via keydown.backspace if they are empty

void initQModel() {
  model = new QMulti();
  model.propositions.add(new Proposition(''));
}

• new propositions are added to the QMulti model and displayed in the form

<button (click)="addProp()">new proposition</button>

<div *ngFor="let p of model.propositions; let i = index">
    <input type="text" name="proposition" [(ngModel)]="p.label"
           (key.enter)="addProp()"
           (keydown.backspace)="onBackspaceKey($event.target.value, i)"
           placeholder="Proposition"
           required/>
    <input type="checkbox" name="isCorrect" [(ngModel)]="p.isCorrect"/> correct
    <a href="#" (click)="rmProp(i)">X</a>
</div>

addProp() {
  model.propositions.add(new Proposition(''));
}

• to remove a propositions

rmProp(int propId) {
  model.propositions.removeAt(propId);
}

Reactive Template driven

• formModel initialisation

void initFormModel() {
  usersControlArray = new ControlArray([
    new ControlGroup(
      {'label': new Control('aaa'), 'isCorrect': new Control(false)})
  ]);

  questionForm = fb.group({
    'label': ['', Validators.required],
    'propositions': usersControlArray
  });
}

• new propositions are added to the FormModel

<button (click)="addPropControl()">new proposition</button>

<div *ngFor="let p of fo.form.controls['propositions'].controls; let i = index">
    <input type="text" name="proposition" [ngFormControl]="p.controls['label']"
           tabindex="{{(i*2)+2}}"
           (key.enter)="addPropControl()"
           (keydown.backspace)="onBackspaceKey($event.target.value, i, true)"
           required/>
    <input type="checkbox" name="isCorrect"
           tabindex="{{(i*2)+3}}"
           [ngFormControl]="p.controls['isCorrect']"/> correct
    <a href="#" (click)="rmPropControl(i)">X</a>
</div>

addPropControl() {
  (questionForm.controls['propositions'] as ControlArray).push(
    new ControlGroup(
        {'label': new Control(''), 'isCorrect': new Control(false)}
        )
  );
}

• to remove a proposition

rmPropControl(int propId) {
    var props = questionForm.controls['propositions'] as ControlArray;
    props.removeAt(propId);

    // todo set focus to next/previous item
}