각도 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> 

희망 같은 새로운 구성 요소를 사용!