角度2 - チェックボックスが選択されている場合、フィールドの検証が必要です

Question

私はAngular2とJSフレームワークの方が一般的です。公式サイトでチュートリアルを流しており、この問題の解決策を見つけることができませんでした。

私はオプションですが、チェックボックスがオンの場合は新しい入力フィールドが表示されます。この部分は問題ではありません。問題は、私はモーダルベースのバリデーションを使用しており、この新しい入力フィールドをチェックボックスがオンの場合にのみ必要とする方法を理解することができないということです。

これは、これまで5月実装です：

<form [formGroup]="form" (ngSubmit)="onSubmit()"> 

<!--{{form}}--> 

<div formGroupName="test"> 
    <div class="field"> 
     <div class="checkbox"> 
      <input type="checkbox" name="entryRecurring" value="" id="entryRecurring" formControlName="entryRecurring" /> 
      <label for="entryRecurring"> 
       <div class="checkbox_icon"></div> 
       Recurring Entry 
      </label> 
     </div> 
    </div> 

    <div *ngIf="form.value.test.entryRecurring"> 
     <div class="field"> 
      <label for="entryRecurringAmount">Repeat Amount</label> 
      <input type="text" name="entryRecurringAmount" value="" id="entryRecurringAmount" formControlName="entryRecurringAmount" /> 
     </div> 
    </div> 
</div> 

<div class="field last"> 
    <button name="submit" id="submit" class="btn btn_sushi" [disabled]="!form.valid">Submit</button> 
</div> 

import {Component, Input, OnInit, OnChanges} from '@angular/core'; 
    import { Validators } from '@angular/common'; 
    import { REACTIVE_FORM_DIRECTIVES, FormGroup, FormControl, FormBuilder } from '@angular/forms'; 
    import { FormMessages } from './../helpers/formMessages.component'; 
    import {EntriesService} from './entries.service';  
    import {ValidationService} from '../helpers/validation.service'; 
    import {Category, CategoryByType} from '../../mock/mock-categories'; 


    @Component({ 
     selector: 'entryForm', 
     templateUrl: 'app/components/entries/entriesEdit.template.html', 
     directives: [REACTIVE_FORM_DIRECTIVES, FormMessages], 
     providers: [EntriesService, ValidationService] 

    }) 
    export class EntriesEditComponent implements OnInit, OnChanges { 
     @Input() control: FormControl; 
     public form:FormGroup; 
     public submitted:boolean = false; 
     // private selectedId: number; 

     categories: Category[]; 
     categoriesSortedByType: CategoryByType[]; 

     constructor(
      private _fb:FormBuilder, 
      private _entriesService: EntriesService 
      // private _router: Router 
     ) { 

      this.form = this._fb.group({ 

       test: this._fb.group({ 
        entryRecurring: [''], 
        entryRecurringAmount: [''], 
       }) 
      }); 
     } 
onSubmit() { 
     this.submitted = true; 
     // console.log(this.form.value); 

     if (this.form.dirty && this.form.valid) { 
      this._entriesService.saveEntry(this.form.value); 
     } 
    } 

Answer 1

あなたはカスタム検証サービスを使用してそれを行うことができます。

import {NgFormModel} from "angular2/common"; 
import {Component, Host} from 'angular2/core'; 

@Component({ 
    selector : 'validation-message', 
    template : ` 
     <span *ngIf="errorMessage !== null">{{errorMessage}}</span> 
    `, 
    inputs: ['controlName : field'], 
}) 



export class ControlMessages { 

    controlName : string; 

    constructor(@Host() private _formDir : NgFormModel){ 

    } 

    get errorMessage() : string { 
     let input = this._formDir.form.find(this.controlName); 
     let checkBx = this._formDir.form.find('checkBoxName'); 
     if(input.value.trim() === '' && checkBx.checked) { 
       return 'The input field is now required' 
     } 
     return null; 
    } 

} 

その後怒鳴る

<div *ngIf="form.value.test.entryRecurring"> 
     <div class="field"> 
      <label for="entryRecurringAmount">Repeat Amount</label> 
      <input type="text" name="entryRecurringAmount" value="" id="entryRecurringAmount" ngControl="entryRecurringAmount" /> 
      <validation-message field="entryRecurringAmount"></validation-message> 
     </div> 
    </div> 

のような新しいコンポーネントを助け希望を使用！