Angular 在表单组中订阅表单数组中的值更改
Angular Subscribe valuechanges in formarray in form group
我是 angular8,我在表单组中有一个表单数组,但我想检测某个输入的新变化。
ngOnInit(): void {
this.makeForm = this.fb.group({
year:['', Validators.required],
amount:['', Validators.required],
desc:['', Validators.required],
details: new FormArray([
this.det(),
])
})
det(){
return new FormGroup({
requestfor : new FormControl(''),
remarks : new FormControl('')
})}
我必须检查数组值中每个值都发生变化的数据。但是如果我使用
就会出错
this.makeForm.value.details.get('requestfor').valueChanges
错误是
ERROR TypeError: Cannot read property 'valueChanges' of undefined
如何获取表单数组值中的值
如何获取值......
ngOnInit(): void {
this.makeForm = this.fb.group({
year:['', Validators.required],
amount:['', Validators.required],
desc:['', Validators.required],
details: new FormArray([
this.det(),
])
})
det(){
fomrgroup2 = new FormGroup({
requestfor : new FormControl(''),
remarks : new FormControl(''),
// file_id : new FormControl(''),
})
formgroup2.valueChanges.subscribe(val => {
console.log(val.requestfor);
console.log(val.remarks);
//One of those 2 here will be changed. Check their values and do whatever
//processing you want to do inside this subscription
});
return formgroup2;
}
创建 FormGroup 时需要订阅 valuesChanges
det(){
//use an auxiliar const
const group=new FormGroup({
requestfor : new FormControl(''),
remarks : new FormControl(''),
// file_id : new FormControl(''),
})}
//subscribe
group.get('requestForm').valueChanges.subscribe(res=>{
})
//return group
return group;
}
你也可以有一个 Observables 数组,并将索引传递给你的函数 det
changesArray:Observable[]=[] //<--don't forget initialize
det(index=0){
//use an auxiliar const
const group=new FormGroup({
requestfor : new FormControl(''),
remarks : new FormControl(''),
// file_id : new FormControl(''),
})}
//fill the array
this.changesArray[index]=group.get('requestForm').valueChanges
//return group
return group;
}
并且当您向 formArray 添加或删除新组时订阅数组的 forkJoin
if (this.subscriptions)
this.subscriptions.unsubscribe();
this.subscriptions=forkJoin(changesArray)
this.subscriptions.subscribe(res=>{
})
更新
如果我们想控制整个数组,我们可以定义一个 observables 数组和一个订阅:
observables:Observable<any>[]=[]
suscription:Subscription
我们需要创建一个函数来订阅 CombineLastest
controlChange()
{
if (this.suscription)
this.suscription.unsubscribe()
this.suscription=combineLatest(this.observables.map(
(o,i)=>o.pipe(startWith(this.array.controls.length>i?this.array.value[i].one:null))
)).subscribe(res=>{
console.log(res)
})
}
我们调用这个函数,当删除一个元素时
removeGroup(index)
{
this.array.removeAt(index);
this.observables.splice(index,1)
this.controlChange()
}
然后在函数组 Array 中添加一个新元素到 this.observables
groupArray(data:any=null)
{
data=data || {one:null,two:null}
const group=new FormGroup({
one:new FormControl(data.one),
two:new FormControl(data.two)
})
this.observables[this.array.controls.length]=group.get('one').valueChanges
this.controlChange()
return group
}
注意:我在这最后一部分代码中使用了 getter
get array() {
return this.form.get("array") as FormArray;
}
我是 angular8,我在表单组中有一个表单数组,但我想检测某个输入的新变化。
ngOnInit(): void {
this.makeForm = this.fb.group({
year:['', Validators.required],
amount:['', Validators.required],
desc:['', Validators.required],
details: new FormArray([
this.det(),
])
})
det(){
return new FormGroup({
requestfor : new FormControl(''),
remarks : new FormControl('')
})}
我必须检查数组值中每个值都发生变化的数据。但是如果我使用
就会出错this.makeForm.value.details.get('requestfor').valueChanges
错误是
ERROR TypeError: Cannot read property 'valueChanges' of undefined
如何获取表单数组值中的值
如何获取值......
ngOnInit(): void {
this.makeForm = this.fb.group({
year:['', Validators.required],
amount:['', Validators.required],
desc:['', Validators.required],
details: new FormArray([
this.det(),
])
})
det(){
fomrgroup2 = new FormGroup({
requestfor : new FormControl(''),
remarks : new FormControl(''),
// file_id : new FormControl(''),
})
formgroup2.valueChanges.subscribe(val => {
console.log(val.requestfor);
console.log(val.remarks);
//One of those 2 here will be changed. Check their values and do whatever
//processing you want to do inside this subscription
});
return formgroup2;
}
创建 FormGroup 时需要订阅 valuesChanges
det(){
//use an auxiliar const
const group=new FormGroup({
requestfor : new FormControl(''),
remarks : new FormControl(''),
// file_id : new FormControl(''),
})}
//subscribe
group.get('requestForm').valueChanges.subscribe(res=>{
})
//return group
return group;
}
你也可以有一个 Observables 数组,并将索引传递给你的函数 det
changesArray:Observable[]=[] //<--don't forget initialize
det(index=0){
//use an auxiliar const
const group=new FormGroup({
requestfor : new FormControl(''),
remarks : new FormControl(''),
// file_id : new FormControl(''),
})}
//fill the array
this.changesArray[index]=group.get('requestForm').valueChanges
//return group
return group;
}
并且当您向 formArray 添加或删除新组时订阅数组的 forkJoin
if (this.subscriptions)
this.subscriptions.unsubscribe();
this.subscriptions=forkJoin(changesArray)
this.subscriptions.subscribe(res=>{
})
更新 如果我们想控制整个数组,我们可以定义一个 observables 数组和一个订阅:
observables:Observable<any>[]=[]
suscription:Subscription
我们需要创建一个函数来订阅 CombineLastest
controlChange()
{
if (this.suscription)
this.suscription.unsubscribe()
this.suscription=combineLatest(this.observables.map(
(o,i)=>o.pipe(startWith(this.array.controls.length>i?this.array.value[i].one:null))
)).subscribe(res=>{
console.log(res)
})
}
我们调用这个函数,当删除一个元素时
removeGroup(index)
{
this.array.removeAt(index);
this.observables.splice(index,1)
this.controlChange()
}
然后在函数组 Array 中添加一个新元素到 this.observables
groupArray(data:any=null)
{
data=data || {one:null,two:null}
const group=new FormGroup({
one:new FormControl(data.one),
two:new FormControl(data.two)
})
this.observables[this.array.controls.length]=group.get('one').valueChanges
this.controlChange()
return group
}
注意:我在这最后一部分代码中使用了 getter
get array() {
return this.form.get("array") as FormArray;
}