具有内部形式初始值的Angular ControlValueAccessor [英] Angular ControlValueAccessor with inner form initial value
本文介绍了具有内部形式初始值的Angular ControlValueAccessor的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我拥有使用ControlValueAccessor
的组件.该组件具有自己的内部表单,我找不到在何处设置表单控件的初始值.
I've this component that use ControlValueAccessor
. The component has his own inner form and I cannot find where to set the initial value for form controls.
有人可以指出我正确的方向吗?
Can someone point me in the right direction?
import {
Component, ChangeDetectorRef, forwardRef,
NgModule, OnInit} from '@angular/core';
import { FormGroup, FormControl, FormBuilder } from '@angular/forms';
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { debounceTime } from 'rxjs/operators';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
export const ADDRESS_VALUE_ACCESSOR: any = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => AddressFormComponent),
multi: true
};
@Component({
selector: 'app-address-form',
templateUrl: 'address-form.component.html',
providers: [ADDRESS_VALUE_ACCESSOR],
})
export class AddressFormComponent implements OnInit, ControlValueAccessor {
addressForm: FormGroup;
private innerValue: any;
onModelTouched: Function = () => { };
onModelChange: Function = () => { };
constructor(
private _fb: FormBuilder,
private ref: ChangeDetectorRef,
) { }
ngOnInit() {
this.addressForm = this._fb.group({
'via': new FormControl(''),
'civico': new FormControl(''),
'cap': new FormControl(''),
'comune': new FormControl(''),
'provincia': new FormControl(''),
'regione': new FormControl(''),
'stato': new FormControl(''),
'frazione': new FormControl('')
});
}
// get accessor
get value(): any {
return this.innerValue;
}
// set accessor including call the onchange callback
set value(v: any) {
if (v !== this.innerValue) {
this.innerValue = v;
this.onModelChange();
}
}
// ngAfterViewInit(): void {
// if (this.value != null) {
// this.addressForm.get('via').setValue(this.value.via);
// this.addressForm.get('civico').setValue(this.value.civico);
// this.addressForm.get('cap').setValue(this.value.cap);
// this.addressForm.get('comune').setValue(this.value.comune);
// this.addressForm.get('provincia').setValue(this.value.provincia);
// this.addressForm.get('frazione').setValue(this.value.frazione);
// this.addressForm.get('stato').setValue(this.value.stato);
// this.addressForm.get('regione').setValue(this.value.regione);
// }
// }
// Set touched on blur
onBlur() {
this.onModelTouched();
}
writeValue(value: any): void {
this.value = value;
this.ref.markForCheck();
}
registerOnChange(fn: Function): void {
this.addressForm.valueChanges.subscribe(() => {
fn(this.addressForm.value);
});
this.onModelChange = fn;
}
registerOnTouched(fn: Function): void {
this.onModelTouched = fn;
}
}
@NgModule({
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule
],
exports: [AddressFormComponent],
declarations: [
AddressFormComponent
],
entryComponents: [AddressFormComponent],
providers: [
]
})
export class AddressFormModule { }
视图:
<form [formGroup]="addressForm">
<div class="row">
<div class="form-group col-md-10">
<label for="txtVia">Via</label>
<input type="text" pInputText class="form-control" id="txtVia"
formControlName="via">
</div>
<div class="form-group col-md-2">
<label for="txtCivico">Civico</label>
<input type="text" pInputText class="form-control" id="txtCivico"
formControlName="civico">
</div>
</div>
<div class="row">
<div class="form-group col-md-3">
<label for="txtCap">Cap</label>
<input type="text" pInputText class="form-control" id="txtCap"
formControlName="cap">
</div>
<div class="form-group col-md-6">
<label for="txtComune">Comune</label>
<input type="text" pInputText class="form-control" id="txtComune"
formControlName="comune">
</div>
<div class="form-group col-md-3">
<label for="txtProvincia">Provincia</label>
<input type="text" pInputText class="form-control" id="txtProvincia"
formControlName="provincia">
</div>
</div>
<div class="form-group">
<label for="txtFrazione">Frazione</label>
<input type="text" pInputText class="form-control" id="txtFrazione"
formControlName="frazione">
</div>
<div class="row">
<div class="form-group col-md-6">
<label for="txtRegione">Regione</label>
<input type="text" pInputText class="form-control" id="txtRegione"
formControlName="regione">
</div>
<div class="form-group col-md-6">
<label for="txtStato">Stato</label>
<input type="text" pInputText class="form-control" id="txtStato"
formControlName="stato">
</div>
</div>
</form>
推荐答案
在writeValue函数内部设置值
Inside the writeValue function set the values
writeValue(value: any): void {
this.value = value;
if (this.value != null) {
this.addressForm.get('via').setValue(this.value.via);
}
this.ref.markForCheck();
}
这篇关于具有内部形式初始值的Angular ControlValueAccessor的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文