Angular 4 ReactiveForms验证

我在尝试使用模型驱动方法ReactiveForms来验证自定义元素。我正在使用tagsinput jquery库，并为该表单创建其他字段。Angular 4 ReactiveForms验证

组件代码：

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字段的形式，一切都很好，但是当我尝试更新标签组件时，表单仍然无效。当我在控制台中显示时，表单是有效的，所以目前我不知道如何验证formValue作为formGroup中的数组，以及如何更改验证值。

来源

2017-09-05 d123546

当角一起使用jQuery你必须照顾自己的变化检测。尽量避免这种情况。我建议使用这些标签的角度版本。例如：https://github.com/Gbuomprisco/ngx-chips – ChrisY

而不是使用这个的，你可以使用

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

，并在你的组件，你可以很容易地

tagName: this.tagName,

将在同样的方式更新值

来源

2017-09-05 10:47:03

它并不重要，我使用这个指令或不，问题是如何验证模型驱动的方法 – d123546

Angular 4 ReactiveForms验证

回答

相关问题