返回 Angular 反应形式的选定属性内的所有对象值

Question

我有一个简单的动态单选按钮，在我的示例中，3 是通过返回数据创建的。

选择无线电值时，它将我的反应性形式带有该值“是”，“否”或“也许”。在这些对象中，我希望将其他属性作为表单的一部分发回。

如下我返回section，还想返回匹配的section的sectionCode。

在更改单选选择之前，我的表单正确显示了所有属性，但显然我只能传回一个值，所以一旦我这样做，其他对象项就会丢失。

https://stackblitz.com/edit/angular-r4g6uv?file=src%2Fapp%2Fpersonal%2Fpersonal.component.ts

section:[
        {
          section: "yes",
          sectionCode: "1"
        },
        {
          section: "no",
          sectionCode: "2"
        },
        {
          section: "maybe",
          sectionCode: "3"
        }
      ]

component.html

<div formGroupName="radioButtons" class="form-group col-6 pl-0 pt-3">
    <h2 class="mb-2">radioButtons</h2>
    <label for="intel-form-submitter" appRequiredLabel>select</label><br />
    <div class="form-check-inline" *ngFor="let item of personal.radioButtons.section">
        <label for="{{item.section}}" class="col-12 customradio"
            ><span>{{item.section}}</span>
            <input value="{{item.section}}" id="{{item.section}}" type="radio" formControlName="section"/>
            <span class="checkmark"></span>
        </label>
    </div>
</div>

component.ts

  createEntry(formBuilder: FormBuilder) {
    return this.formBuilder.group({
      title: this.personal.title,
      creationDate: this.personal.creationDate,
      radioButtons: this.formBuilder.group({
       section: this.personal.radioButtons.section,
      })
    });
  }

Answer 1

希望对你有所帮助。

绑定对象而不是对象中的一个值。在 Component.html

[值]="项目"

组件.html

<form [formGroup]="form" novalidate>
    <div formGroupName="radioButtons" novalidate>

        <div class="form-check-inline" *ngFor="let item of section">
            <label for="{{item.section}}" class="col-12 customradio"
            ><span>{{item.section}}</span>
            <input **[value]="item"** id="{{item.section}}" type="radio" formControlName="section"/>
            <span class="checkmark"></span>
        </label>
        </div>

    </div>

  <button type="button" (click)="save()" >Save</button>

</form>

{{form.value|json}}

组件.ts

xport class AppComponent implements OnInit {
  section = [
    {
      section: "yes",
      sectionCode: "1"
    },
    {
      section: "no",
      sectionCode: "2"
    },
    {
      section: "maybe",
      sectionCode: "3"
    }
  ];

  selectedSection: any;
  form: FormGroup;

  constructor(public formBuilder: FormBuilder) {}

  ngOnInit() {
    this.form = this.createEntry();
  }

  createEntry() {
    return this.formBuilder.group({
      radioButtons: this.formBuilder.group({
        section: this.section[0]
      })
    });
  }

  save(){
    console.log(this.form)
  }
}

在https://stackblitz.com/edit/k-react-form-radio-test-5bixbv中查找项目

Answer 2

您可以绑定对象本身而不仅仅是部分名称。

<input [value]="item" id="{{item.section}}" type="radio"/>

演示：https://stackblitz.com/edit/angular-h1mwhe