Angular 2 - 如果選中複選框，則需要字段驗證

Question

Hy guys我是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> 

希望這有助於！