Angular 2 select 选项状态

Question

我在 Angular2 应用程序中使用 select2(https://github.com/NejcZdovc/ng2-select2.)。该表格基于 reactive/Model 基础表格。我想知道如何为 select 选项激活它的不同状态（脏的、触摸的、原始的）。当我更改 select 选项值时，我面临的问题是在我的编辑表单中，它不会使表单变脏或被触摸。请帮忙！！

<form id="validation-form" class="form-horizontal form-label-left parsleyjs" data-parsley-priority-enabled="false" novalidate 
    (ngSubmit)="saveProduct()" [formGroup]="productForm">
 <div class="form-group row">
              <label for="shelflife" class="col-md-4 col-form-label">Shelf Life (Month) <span class="required">*</span>
               <div *ngIf="productForm.get('shelflife').errors">
                  <ul class="parsley-errors-list filled" id="parsley-id-5"><li class="parsley-required">This value is required</li></ul>
                </div>
              </label>
              <div class="col-md-7">
                <select2 class="select2-selection select2-selection--single" [data]="shelflife_data | async" [value]="selectedShelflife | async" [width]="'100%'" 
                    (valueChanged)="onShelflifeChanged($event)" [options]="{theme: 'bootstrap'}"></select2>
              </div>
            </div>

下面是组件的ts代码

 ngOnInit(): void {

   jQuery('.parsleyjs').parsley({
      errorsContainer: function (elem, isRadioOrCheckbox) {
        return jQuery(elem.$element).closest('.form-group').children('label');
      }
    });

    this.productForm = this.fb.group({
      gtin: [''],
      fdoname_en: [''],
      fdoname_fa: [''],
      newirc: [''],
      singleunitpackage: [''],
      multiunitpackage: [''],
      shelflife: ['', [Validators.required]],
      dosageform: ['', [Validators.required]],
      routeadmin: [''],
      productcategory: [''],
      status: [''],
      genericname_en:['', [Validators.required]]
    });

    this.loadShelflife();
    this.loadGenericProduct() 
    this.loadDosageForm();
    this.loadProductCat();

    // Read the gtin from the route parameter
    this.sub = this.route.params.subscribe(
      params => {
        this.gtin = params['gtin'];
        this.getProduct(this.gtin);
      }
    );

    const genericnameControl = this.productForm.controls["genericname_en"];
    genericnameControl.valueChanges.subscribe(value => {
      //this.productForm.controls['genericname_en'].markAsDirty();
      if (value === '-1') {
        genericnameControl.setErrors({
          required: true
        });
      }
    });

    const dosageformControl = this.productForm.controls["dosageform"];
    dosageformControl.valueChanges.subscribe(value => {
      //this.productForm.controls['dosageform'].markAsDirty();
      if (value === '-1') {
        dosageformControl.setErrors({
          required: true
        });
      }
    });

    const shelflifeControl = this.productForm.controls["shelflife"];
    shelflifeControl.valueChanges.subscribe(value => {
      //this.productForm.controls['shelflife'].markAsDirty();
      if (value === '-1') {
        shelflifeControl.setErrors({
          required: true
        });
      }
    });
  }

saveProduct(): void {
if (this.productForm.dirty && this.productForm.valid) {
  console.log("INSIDE SAVE PRODUCT!!!!!! " + this.productForm.value.productcategory);
  let gtin = this.route.snapshot.params['gtin'];
  let p = Object.assign({}, this.product, this.productForm.value);
  this.productDataService.saveProduct(p,gtin)
            .subscribe(
                () => this.onProductComplete(),
                (error: any) => this.errorMessage = <any>error
            );
} else if (!this.productForm.dirty) {
  this.onProductComplete();
}
  }

Answer 1

查看您正在使用的 select 组件后，我从源代码中可以看出作者没有在他的库中正确实现 ControlValueAccessor 所以 angular 不是能够获取您正在使用的 select 个盒子所做的状态更改。

如果您需要检查表单状态，我会放弃那个令人讨厌的库并转移到其他地方。

来源：https://github.com/NejcZdovc/ng2-select2/blob/master/lib/ng2-select2.component.ts

Angular 2 select 选项状态

Angular 2 select option State

angular2-forms

angular2-directives

angular