如何在反应式中采用默认值

如何解决如何在反应式中采用默认值

我想使用响应式表单将默认值从 HTML 传递到 Type 脚本

<ul class="list list_2">
<li>Subtotal <span>{{cartTotal | currency:'INR':true:'2.0'}}</span></li>
<li>Shipping Charge<span>{{shipping | currency:'INR':true:'2.0'}}</span></li>
<li>Total <span><input type="text" value="{{cartTotal+shipping | currency:'INR':true:'2.0'}}" class="total" formControlName="TotalAmount" readonly></span></li>
</ul>

这是我的 HTML，我在输入中给出了默认值

get TotalAmount(){
    return this.billingForm.get("TotalAmount.value")

在类型脚本中，我有这种获取数据的方法，我正在使用 Formgroup

billingForm=new FormGroup({
    Address:new FormControl('',[Validators.required]),City:new FormControl('',State:new FormControl('',Postcode:new FormControl('',TotalAmount:new FormControl(''),PayType:new FormControl('')
  })

我想传递那个默认值，但它总是给 null

解决方法

应该是这样的。您必须访问表单控件才能返回值。

return this.billingForm.controls['TotalAmount'].value;

,

我不确定您是否可以将表单控件与值属性一起使用。它可能有效，也可能无效。无论如何，我认为这不是使用 angular Form Control 的正确方法。

当您初始化表单控件时，应设置输入元素的默认值。在您的情况下，它是 TotalAmount:new FormControl('2.0')。 2.0 是您要设置的默认值。

如果您想将管道应用于表单值，我建议您在 component.ts 文件中进行。 ts 文件中也可以使用 Angular 管道。

,

你应该用不同的方式包装东西。

首先，更改表单的初始化。

将 FormBuilder 添加为组件构造器的依赖项。

constructor(private builder: FormBuilder) {}

并使用构建器来初始化您的表单。

    this.billingForm = this.builder.group({
      Address: new FormControl("",[Validators.required]),City: new FormControl("",State: new FormControl("",Postcode: new FormControl("",TotalAmount: new FormControl(""),PayType: new FormControl("")
    });

然后，您的 TotalAmount 的 HTML 为：

<li>Total <span><input type="text" value="{{TotalAmount | currency:'INR':true:'2.0'}}" class="total" formControlName="TotalAmount" readonly></span></li>

因此，当您从数据库中获取 cartTotal 时。将 cartTotal+shipping 分配给您的 TotalAmount FormControl。喜欢：

this.billingForm.get("TotalAmount").setValue(this.cartTotal + this.shipping);

并且，将您的 TotalAmount 属性更改为：

   get TotalAmount() {
      return this.billingForm.get("TotalAmount").value;
   }

示例：

工作演示在StackBlitz