Angular2: get value of input in dynamic form

Question

I need to get value of a certain input in my dynamic form.

I have JSON parameters like this

{  
     "etiquette":"Téléphone mobile",
     "ordre":1,
     "obligatoire":true,
     "pattern":"^(?:(?:(?:\\\\+|00)33[ ]?(?:\\\\(0\\\\)[ ]?)?)|0){1}[1-9]{1}([ .-]?)(?:\\\\d{2}\\\\1?){3}\\\\d{2}$",
     "section":"TelMail",
     "type":"text",
     "nom":"telephoneMobile",
     "texteIndice":"Téléphone mobile"
  }
,
  {  
     "etiquette":"Mail",
     "ordre":2,
     "obligatoire":true,
     "pattern":"(?:[a-zA-Z0-9!#$%&''*+=?^_`{|}~-]+(?:\\\\.[a-zA-Z0-9!#$%&''*+=?^_`{|}~-]+)*|\u201d(?:[\\\\x01-\\\\x08\\\\x0b\\\\x0c\\\\x0e-\\\\x1f\\\\x21\\\\x23-\\\\x5b\\\\x5d-\\\\x7f]|\\\\\\\\[\\\\x01-\\\\x09\\\\x0b\\\\x0c\\\\x0e-\\\\x7f])*\u201d)@(?:(?:[a-zA-Z0-9àâäçéèëêîïôôûüù](?:[a-zA-Z0-9-àâäçéèëêîïôôûüù]*[a-zA-Z0-9àâäçéèëêîïôôûüù])?\\\\.)+[a-zA-Z0-9àâäçéèëêîïôôûüù](?:[a-zA-Z0-9-àâäçéèëêîïôôûüù]*[a-zA-Z0-9àâäçéèëêîïôôûüù])?|\\\\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-zA-Z0-9-]*[a-zA-Z0-9]:(?:[\\\\x01-\\\\x08\\\\x0b\\\\x0c\\\\x0e-\\\\x1f\\\\x21-\\\\x5a\\\\x53-\\\\x7f]|\\\\\\\\[\\\\x01-\\\\x09\\\\x0b\\\\x0c\\\\x0e-\\\\x7f])+)\\\\])",
     "section":"TelMail",
     "type":"email",
     "nom":"mail",
     "texteIndice":"Mail"
  },
{  
     "etiquette":"Type alerte",
     "ordre":3,
     "obligatoire":true,
     "options": [{
                 "code" : "SMS",
                 "valeur" : "Alertes SMS"
                  },
                  {
                  "code" : "MAIL",
                  "valeur" : "Alertes Mail"
      }],
     "section":"Alerte",
     "type":"radio",
     "nom":"typeAlerte",
     "texteIndice":"Type alerte"
  }

I have Interface like below screenshot.

I customised radio component to contain radio input and input for mail and phone. What I need is: get value of input phone/mail and put in in the input related to the radio. Here is my radio component:

    import {Component,Inject,Input} from '@angular/core';
import {NgForm, FormGroup} from '@angular/forms';
import {ExtraFormField} from '../model/form';
import {ExtraField} from './extra-field';
import { CatalogueService } from "../../catalogue/catalogue.service";

@Component({
    selector: 'radio-extra-field',
    template:`
            <div class="form-group" >
                <label [attr.for]="field.nom">{{field.etiquette}}</label>
                <div *ngFor="let option of field.options" >
                    <input type="radio" name ="{{field.nom}}" value="{{option.code}}" id="{{option.code}}" [(ngModel)]="typeSelectionne">{{option.valeur}}
                    <input id="{{option.code}}" [attr.title]="field.etiquette" [attr.minlength]="field.longueurMin" [attr.min]="field.min" [attr.max]="field.max"
                        [attr.maxlength]="field.longueurMax"  [attr.value]="field.valeur"
                        [attr.type]="text" [formControl]="fieldControl" (change)="maj(id.value)"
                        [attr.id]="option.code" type="text" [attr.disabled]="typeSelectionne != option.code? disabled : null ">

                    <error-messages [control]="field.nom"></error-messages>
                </div>
                <error-messages [control]="field.nom"></error-messages>
            </div>

    `
})

export class RadioExtraField extends ExtraField {
        typeSelectionne: string;
        @Input() field:ExtraFormField;
        @Input() entity:{fields:Object};
        @Input() formGroup:FormGroup;

    constructor(public catalogueService: CatalogueService, @Inject(NgForm) formDir: NgForm) {
        super(null, catalogueService, formDir);
    }
    get disabled():string {
        if(this.field) {
            return 'disabled';
        }
        return null;
    }
}

Is there a way to do this ?

thank you

Answer 1

You can use

(ngModelChange)

what it do is it will call function ,there you can assign value to ngModel of input field.