Angular 13：收音机 [已检查] 不适用于 formControlName

Question

我正在使用一个简单的 FormGroup 来为收音机设置一个检查值，但它根本不起作用。它从首页到代码有效，但从代码到首页无效。

HTML:

   <form [formGroup]="myForm">
    <div class="form-check form-check-inline mt-2">
      <input class="form-check-input" type="radio" formControlName="radioValue1"
             id="radioStopLossNone" [checked]="radioModel.value1==1"
             value="1">
      <label class="form-check-label" for="radioStopLossNone">None</label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" formControlName="radioValue1"
             id="radioStopLossFixed" [checked]="radioModel.value1==2"
             value="2">
      <label class="form-check-label" for="radioStopLossFixed">Value-1</label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" formControlName="radioValue1"
             id="radioStopLossTrailing" [checked]="radioModel.value1==3"
             value="3">
      <label class="form-check-label" for="radioStopLossTrailing">Value-2</label>
    </div>
   </form>

型号：

export class Model {
   value1: number;
}

TS:

ngOnInit(): void {
  this.model = new Model();
  this.model.value1 = 1;

  this.myForm = this.formBuilder.group({
    radioValue1: [model.value1, [Validators.required]],
  });
  this.f.radioValue1.valueChanges.subscribe(() => {
    console.log('radioValue1: ' + this.f.radioValue1.value);
  });
}

现在，如果我从 radio 控件中删除 formControlName 标签，那么它会开始读取代码并检查从代码到首页的 radios，但会禁用link 从首页到代码。我怎样才能让他们同时工作？

谢谢。

解决方案： 我按照@rohithpoya 的建议从 HTML 中删除 checked 属性并在模型中使用相同的数据类型并且它有效。

<input type="radio" formControlName="radioValue1" value="2"> // value is string

value='2'设置为string，那么在我使用的模型中：

this.model.value1 = '1'; // value here is string too
this.myForm = this.formBuilder.group({
  radioValue1: [model.value1, [Validators.required]],
});

Answer 1

您可以删除选中的属性。实际上，如果您在表单控件中有值，它应该会自动被选中。如果它不起作用，您需要检查您将值定义为数字的 value.In 模板的类型，并请确认您在表单控件中也有数字类型。

我还看到你没有在 ts 文件中声明 radioModel。因此，请尝试使用 model.

而不是 radioModel

更新

ngOnInit(): void {
  this.radioModel = new Model();
  this.radioModel.value1 = 1;

  this.myForm = this.formBuilder.group({
    radioValue1: [model.value1, [Validators.required]],
  });
  this.f.radioValue1.valueChanges.subscribe(() => {
    console.log('radioValue1: ' + this.f.radioValue1.value);
  });
}

在 ts 文件中使用它。

Answer 2

您没有正确获取 radioValue1

使用此代码：

HTML :

<div class="form-check form-check-inline mt-2">

    <input class="form-check-input" type="radio" formControlName="radioValue1" 
         [checked]="radioModel.value1 === 1" [value]="1">
    
    <label class="form-check-label" for="radioStopLossNone">None</label>
</div>

<div class="form-check form-check-inline">

    <input class="form-check-input" type="radio" formControlName="radioValue1" 
        [checked]="radioModel.value1 === 2" [value]="2">
    
    <label class="form-check-label" for="radioStopLossFixed">Value-1</label>
</div>

<div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" formControlName="radioValue1"  
        [checked]="radioModel.value1 === 3" [value]="3">
    
    <label class="form-check-label" for="radioStopLossTrailing">Value-2</label>
    
</div>

TS :

ngOnInit(): void {
  this.model = new Model();
  this.model.value1 = 1;

  this.myForm = this.formBuilder.group({
    radioValue1: [model.value1, [Validators.required]],
  });
  
  this.myForm.controls["radioValue1"].valueChanges.subscribe(() => {
    this.model.value1 = this.myForm.controls["radioValue1"].value;
    console.log('radioValue1: ' + this.myForm.controls["radioValue1"].value);
  });
}

在 TS 代码中，您可以使用 myForm.controls["radioValue1"] 并对其进行操作。

在 HTMl 代码中，您通过 [value] 属性设置输入值而不是常规的“值”属性。

并通过将 == 更改为 ===

来正确检查它是否匹配

Angular 13：收音机 [已检查] 不适用于 formControlName

Angular 13: Radio [checked] not working with formControlName

angular

radio

formgroups