0
私はAngular 2アプリケーションでselect2（https://github.com/NejcZdovc/ng2-select2。）を使用しています。フォームは、反応型/モデルベースのフォームに基づいています。 selectオプションのさまざまな状態（ダーティー、タッチ、プリシーン）をアクティブにする方法を知りたい。私が直面している問題は、私が選択オプションの値を変更したときに私の編集フォームにあり、それはフォームを汚くしたり、触ったりしません。助けてください！！以下は 
角度2選択オプション状態
<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>使用しているselectコンポーネントに探した後、コンポーネント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();
}
}
私たちにいくつかのコードを教えてください！ HTMLとコンポーネント – borislemke
テンプレートドリブンフォームを使用しているのか、モデルドリブンフォームを使用しているのかは判断できません。 – borislemke
私はModel Drivenフォームを使用していますが、HTMLコード – ZAJ