Angular 7：单击单选按钮时显示值答案

【问题标题】：Angular 7: Display value when click on Radio buttonAngular 7：单击单选按钮时显示值
【发布时间】：2019-12-14 15:47:04
【问题描述】：

单选按钮有问题。单击单选按钮时，我需要显示值。比方说，当单击每周时，它会在“选择”元素处显示“每周”。我已经尝试过，但它不起作用。你能教我应该在哪里更改或添加以使其显示。

这是我的代码。

HTML

    <form [formGroup]="form" (ngSubmit)="submit()">

  <label *ngFor="let order of orders">
    <input formControlName="orders" type="radio" name="orders" [value]="order.id" />
    {{order.name}}
  </label>

  <br>
  <label *ngFor="let radiobutton of options">
    <input type="radio" class="justify-right" formControlName="options" name="options" [value]="radiobutton.id">{{radiobutton.name}}
    </label>

   <p>Selection: {{options.name}}</p>
  <button>submit</button>
</form>

这是我的组件代码

    form: FormGroup;
  orders = [];
  options = []

  constructor(private formBuilder: FormBuilder) {
    this.form = this.formBuilder.group({
      orders: [''],
      options: ['']
    });

    // mimic async orders
    of(this.getOrders()).subscribe(orders => {
      this.orders = orders;
      this.form.controls.orders.patchValue(this.orders[0].id);
    });

    // getOptions
    of(this.getOptions()).subscribe(options => {
      this.options = options;
      this.form.controls.options.patchValue(this.options[0].id);
    })

    // synchronous orders
    // this.orders = this.getOrders();
    // this.form.controls.orders.patchValue(this.orders[0].id);
  }

  getOrders() {
    return [
      { id: 100, name: 'order 1' },
      { id: 200, name: 'order 2' },
      { id: 300, name: 'order 3' },
      { id: 400, name: 'order 4' }
    ];
  }

  getOptions(){
        return[
          {id: 'Once', name: 'Once'},
          {id: 'Daily', name: 'Daily'},
          {id: 'Weekly', name: 'Weekly'},
          {id: 'Interval', name: 'Interval'},
        ]
      }

      ngOnInit(){
        this.options
      }

  submit() {
    console.log(this.form.value);
  }

参考可以参考here

希望大家帮忙..

提前致谢

【问题讨论】：

标签： angular typescript

【解决方案1】：

您可以使用form 变量直接在HTML 中访问options，也可以在组件中使用getter 并在HTML 中显示。

使用form直接显示选择的值

<p>Selection: {{form.get('options').value}}</p>

使用 getter 显示选定的值

组件

get optionsValue() {
  return this.form.get('options').value;
}

HTML

<p>Selection: {{optionsValue}}</p>

【讨论】：

【解决方案2】：

由于您有一个与 formGroup 关联的表单控件，因此您无法访问选项表单控件（如 options.name），而是可以使用 getter

getter 可以轻松访问表单控件中的别名实例相比重复 form.get('options') 方法来获取每个实例。

get Options(){
        return this.form.get('options').value;
 }

参考：https://angular.io/guide/reactive-forms#step-3-accessing-the-formarray-control

例如：https://stackblitz.com/edit/angular-dynamic-radio-list-pyad5s

【讨论】：

【解决方案3】：

如果您想在显示之外使用此值，您将需要使用 ngModel。在您的情况下这样做：

将您的输入更改为

<input [(ngModel)]="selection" type="radio" class="justify-right" formControlName="options" name="options" [value]="radiobutton.id">

然后将其添加到选项下的打字稿文件中

selection: String;

并将您的选择打印更改为

Selection: {{selection}}

现在，如果您想在 TypeScript 函数中的任何位置使用此值，只需使用 this.selection

调用它

【讨论】：

【解决方案4】：

你只需要替换一行。

与

<p>Selection: {{options.name}}</p>

低于一。

<p>Selection: {{form.controls['options'].value}}</p>

【讨论】：