时间戳

首页 > 解决方案 > Angular Reactive 表单默认输入值

angular - Angular Reactive 表单默认输入值

问题描述

您好，我有角度反应形式，我的代码如下所示：

this.rForm = fb.group({
  'membership' : '',
  'pointed' : '',
});

所以我在提交表单后得到了值

this.selectedMembership = this.rForm.get('membership').value;
this.pointed = this.rForm.get('pointed').value;

html 代码如下：

    <div class="membership">
            <div *ngFor="let m of membership | async" class="membershipBtnGroup " data-toggle="buttons">
                <input  type="radio" formControlName="membership" value="{{ m.level }}" id="{{ m.title }}" class="input-hidden" />
                <label  for="{{ m.title }}">
                    <img src="{{ m.imageUrl }}">
                    <br><br>
                    <input type="text" pattern="[0-9]*" formControlName="pointed" value="{{ m.points }}" class="form-control pointed">

                </label>                                                 
            </div>        
    </div>

所以点击图像，它正在选择无线电输入并获取 m.level 的值。我有一个小的css代码，当它点击另一个文本输入“pointed”时显示宽度默认m.points值，但是如果我将此文本输入更改为其他值，它会保存这个值，但如果我没有触摸并且没有更改它是不保存默认值

<input type="text" pattern="[0-9]*" formControlName="pointed" value="{{ m.points }}" class="form-control pointed">

所以当我点击图片时

<img src="{{ m.imageUrl }}">

它显示收音机和文本输入，收音机数据正确保存，但文本输入数据（宽度默认值，如果我没有触摸）没有保存。

如果我没有触摸并且没有更改输入，我想获得默认值，但是如果我要更改输入，它必须保存新值。

标签： angular

解决方案

是的，你可以使用new FormControl()

this.rForm = fb.group({
   'membership' : new FormControl('def value'),
   'pointed' : ['def value', Validators.required ],,
});

您还可以在文档中获得更多详细信息选项

下面是文档的链接here

推荐阅读