【问题标题】:Angular Reactive FormGroup value changes is not emitting changes in observableAngular Reactive FormGroup 值更改不会在可观察到的情况下发出更改
【发布时间】:2020-01-26 15:28:29
【问题描述】:

我已经声明了一个简单的表单,并为其分配了一个 observable,该 observable 被映射为返回一个对象,我在返回之前将对象记录在控制台中,但 valuechanges 永远不会触发。

comPlanForm= new FormGroup({
    commissionPlanType: new FormControl('', [Validators.required]),
    commissionPlanName: new FormControl('', [Validators.required, Validators.maxLength(150)]),
    commissionPlanDescription: new FormControl('', [Validators.maxLength(150)]),
    payoutSchedule: new FormControl('', [Validators.required]),
    broker: new FormControl('', [Validators.required]),
    trigger: new FormControl('', [Validators.required]),
     waitUntilDays: new FormControl('', [Validators.required]),
    startDate: new FormControl('', [Validators.required]),
    endDate: new FormControl('')});

comPlanForm$ = this.comPlanForm.valueChanges.pipe(
    map(value => { 
        const plan= new CommissionPlanRequest(null,null,value.commissionPlanName, value.commissionPlanDescription,
        value.commissionPlanType, value.startDate, value.endDate, value.payoutSchedule, value.broker, null,
        new PlanTrigger(null,value.waitUntilDays,value.trigger),[]) 
        return plan;
    }),
    tap(x=>console.log(x))
);

我没有 ngOnInit,我也尝试将 console.log 放入 map 函数本身没有运气,关于为什么我的值更改没有触发的任何想法?

【问题讨论】:

  • 你没有订阅...
  • 这里不需要订阅
  • 为什么不需要subscribe
  • 您要么需要直接订阅(并在完成订阅后清理订阅,要么存在内存泄漏 - 请参阅 this blog post )或通过模板中的异步管道(内部订阅)管道 comPlanForm$
  • @AndrewAllen:我错过了模板中的异步管道,我不知道我是怎么忘记的。非常感谢。

标签: angular typescript rxjs reactive-programming angular-reactive-forms


【解决方案1】:
 this.comPlanForm.valueChanges.subscribe(value =>
  { 
    const plan= new CommissionPlanRequest(null,null,value.commissionPlanName, value.commissionPlanDescription,
    value.commissionPlanType, value.startDate, value.endDate, value.payoutSchedule, value.broker, null,
    new PlanTrigger(null,value.waitUntilDays,value.trigger),[]) 
    this.comPlanForm$ = plan;
}

);

【讨论】:

    猜你喜欢
    • 2016-02-11
    • 1970-01-01
    • 2017-03-13
    • 2012-09-22
    • 2018-03-17
    • 2021-04-08
    • 2019-12-22
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多