代码之家 › 专栏 › 技术社区 › Willem van der Veen

角度如何默认设置单选按钮,反应形式

angular-forms angular

Willem van der Veen · 技术社区 · 6 年前

使用单选按钮以角度实现反应形式。我想设置一个默认值,我尝试了以下操作:

模板:

<form [formGroup]="form" (ngSubmit)="onSubmit(form)" class="actionsForm">

    <input type="radio" id="entertainCrowdSkill1" [value]="skillsForBackend[0]"
    class="radiobuttons" formControlName="skill" [checked]="true">

    <input type="radio" id="entertainCrowdSkill2" [value]="skillsForBackend[1]" 
    class="radiobuttons" formControlName="skill">

</form>

模型:

  ngOnInit() {
    this.form = this.fb.group({
      skill: ['', Validators.required],
    });

  }

  onSubmit(form) {
    console.log(form.controls.skill.value) // logs empty string
}

按钮似乎被选中,即使 CSS:checked 类已应用。但是,当我试图记录技能值时,它是一个空字符串(FB中输入的默认值)。我看到一个 answer 但这是针对模板驱动的表单。

如何以响应形式为模板中的单选按钮设置默认值?

1 回复 | 直到 6 年前

Felix Lemke 5 年前

用指定初始值 FormBuilder 分组控制器而不是使用[选中]。您分配了值 '' ,这是一个空字符串。要执行onsubmit函数,请添加 (ngSubmit)="onSubmit()" 到表单标记。

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <input type="radio" formControlName="skill" [value]="skillsForBackend[0]">
  <input type="radio" formControlName="skill" [value]="skillsForBackend[1]">
</form>

在您的字体脚本中,尝试以下操作。

ngOnInit() {
  this.form = this.fb.group({
    skill: [this.skillsForBackend[0], Validators.required]
  });
}

onSubmit() {
  console.log(this.form.value) // should show { skill: /* your data */ }
}

推荐文章

Joseph · 在Angular 4中单击Cancel(取消)时,在中卸下加载器

7 年前

hY8vVpf3tyR57Xib · 使用角度中具有禁止形式值的数组进行形式验证

7 年前

Dave Nottage · 使用Angular 4.4.6在开发模式下没有提供NgForm错误

7 年前

Ebin Manuval · ng内的ng表单重复不更新子表单$提交

7 年前

nintschger · 角度反应形式-动态设置验证器行为异常

7 年前

Antonio · ngx芯片最小文本长度

7 年前

Stefan · 设置属性。要求“条件”不检查任何内容

7 年前

Inigo · 将验证器名称的预定义配置数组传递给表单组件

7 年前

esseara · 角度验证器不工作

7 年前

sHamann · 角度2使形状无效

7 年前