각도 4 ReactiveForms 유효성 검사

Question

저는 모델 기반 접근 방식 인 ReactiveForms를 사용하여 맞춤 요소의 유효성을 검사하려고합니다. 나는 그것에 대해 tags 입력 jquery 라이브러리를 사용하고 해당 양식에 대한 추가 필드를 작성합니다.

구성 요소 코드 : 태그 구성 요소에 대한

declare var $:any; 

    declare interface Variants { 
     variants: Variant[]; 
    } 

    declare interface Variant { 
     optionName: string; 
     optionValues: string[]; 
    } 

    ... 
export class ProductsNewComponent implements OnInit, AfterViewInit { 

    public myForm: FormGroup; 
    constructor(private _fb: FormBuilder) { 
    ... 
    } 

    ngOnInit() { 

      this.myForm = this._fb.group({ 
       title: ['', [Validators.required, Validators.minLength(5)]], 
       variants: this._fb.array([ 
        this.initVariant(), 
       ]) 
      }); 
    } 

    initVariant() { 
      return this._fb.group({ 
       optionName: ['', Validators.required], 
       optionValues: ['', Validators.minLength(1)] <= tried 
       //['', this.minLengthArray(1)] 
       //this._fb.array([], this.minLengthArray(1)) 
       //['', Validators.compose([Validators.required, Validators.minLength(1)])] 
       //Validators.minLength(1)] 
       //this._fb.array([], Validators.minLength(1)) 

      }); 
     } 

    ngAfterViewInit(){ 


     if($(".tagsinput").length != 0){ 

      $("#option_0").tagsinput({ 
       'onAddTag': this.tagsChange(0) 
      }); 
     } 

    } 

콜백 :

tagsChange(id) { 

      id = typeof id !== 'undefined' ? id : 0; 
      //Gettings Values Array 
      var array = $('#option_' + id).tagsinput(); 
      this.optionValues[id] = array[0].itemsArray; 

      //Updating value 
      const control = <FormArray>this.myForm.controls['variants']; 

      control["controls"][id].patchValue({ 
       optionValues: this.optionValues[id] 
      }); 

HTML 코드 : 기본적으로

<div formArrayName="variants" class="row"> 
    <div class="col-md-12" *ngFor="let variant of myForm.controls.variants.controls; let i=index "> 
     <div [formGroupName]="i"> 
      <div class="col-md-6"> 
       <legend>Option Name {{i + 1}} 
        <small class="category" *ngIf="myForm.controls.variants.controls.length > 1" (click)="removeOptions(i)"> 
               Remove 
        </small> 
       </legend> 
       <div class="form-group label-floating"> 
        <input formControlName="optionName" type="text" class="form-control"> 
       </div> 
       <small [hidden]="myForm.controls.variants.controls[i].controls.optionName.valid"> 
         Option Name {{i+1}} is required 
       </small> 
      </div> 
      <div class="col-md-6"> 
       <legend>Option Values</legend> 

       <input id="option_{{i}}" formControlName="optionValues" value="" class="tagsinput" data-role="tagsinput" data-color="danger" 
       /> {{optionValues[i] | json}} 
       <!-- You can change data-color="rose" with one of our colors primary | warning | info | danger | success --> 
       <small [hidden]="myForm.controls.variants.controls[i].controls.optionValues.valid"> 
        Option Values {{i+1}} is required 
       </small> 
      </div> 
     </div> 
    </div> 
    <div class="col-md-12"> 
     <button (click)="addOptions(i)" class="btn"> 
      Add Another Option 
      <span class="btn-label btn-label-right"> 
       <i class="material-icons">keyboard_arrow_right</i> 
      </span> 
      <div class="ripple-container"></div> 
     </button> 
    </div> 
</div> 

, 내가 추가 추가 al 필드를 양식에 추가하면 모든 것이 정상이지만 해당 태그 구성 요소를 업데이트하려고하면 양식이 여전히 유효하지 않습니다. 콘솔에 표시 할 때 양식이 유효하므로 현재 optionValues를 formGroup의 배열로 유효성을 검사하는 방법과 유효성을 변경할 경우 값을 업데이트하는 방법을 알지 못합니다.

Answer 1

대신이 사용하는 당신은

<div class="panel panel-info"> 
         <tag-input theme='minimal' name="tagName" [(ngModel)] = "tagName"></tag-input> 
        </div> 

을 사용할 수 있으며 구성 요소에서 당신은 쉽게

tagName: this.tagName, 

그것은