Angular 4 ReactiveForms Validation

Question

J'essaie de valider un élément personnalisé en utilisant une approche pilotée par un modèle, ReactiveForms. J'utilise tagsinput jquery bibliothèque pour cela et en créant des champs supplémentaires pour ce formulaire.

Code de composants:

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

    } 

Callback pour les composants tags:

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

Code 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> 

En fait, quand j'ajoute plus Tout le champ est correct, mais quand j'essaye de mettre à jour ce composant, le formulaire reste invalide. Quand je l'affiche en console, le formulaire est valide, donc actuellement je ne sais pas comment valider cette optionValues ​​en tant que tableau dans un formulaireGroupe et aussi comment mettre à jour la valeur si je change de validation.

Answer 1

Au lieu d'utiliser cela, vous pouvez utiliser

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

et dans votre composant, vous pouvez facilement

tagName: this.tagName, 

il mettra à jour la valeur de la même façon