Angular2：動的フォームの入力値を取得する

Question

動的フォームで特定の入力値を取得する必要があります。

私はこの

{ 
    "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" 
    } 

のようなJSONパラメータは、私はスクリーンショット以下のようなインタフェースを持っています。

メールと電話のラジオ入力と入力を含むラジオコンポーネントをカスタマイズしました。 私が必要とするのは、入力電話/メールの価値を取得し、ラジオに関連する入力に入れることです。これを行う方法は

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; 
    } 
} 

あります： はここに私のラジオコンポーネントですか？

は、あなたはそれが何をするか

(ngModelChange) 

を使用することができますあなたの

Answer 1

に感謝し、それはあなたが入力フィールドのngModelに値を割り当てることができますが、関数を呼び出しますです。