Question

我在Angular 2应用程序中使用select2（https://github.com/NejcZdovc/ng2-select2。）。表格基于反应/基于模型的形式。我想知道如何激活其选择选项的不同状态（脏，触摸，原始）。当我更改选择选项值时，我面临的问题是在我的编辑表单中，它不会使表单变脏或触摸。请帮忙！！

＆＃13;

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

＆＃13;

以下是组件ts代码

＆＃13;

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

＆＃13;

Answer 1

在查看您正在使用的select组件后，我可以从源代码中看到作者未在其库中正确实现ControlValueAccessor，因此角度无法获取状态您正在使用的选择框所做的更改。

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

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

Angular 2选择选项状态

1 个答案: