Question

我的单选按钮有问题。单击单选按钮时，我需要显示值。假设当单击“每周”时，在“选择”元素上显示“每周”。我已经尝试过了，但是没有用。您能教我在哪里更改或添加使其显示。

这是我的代码。

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>

这是我的组件代码

TS

    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

希望大家都能提供帮助。

预先感谢

Answer 1

如果您想在显示此值之外使用此值，则将要使用ngModel。为此，您可以这样做：

将输入更改为

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

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

selection: String;

并将您的选择打印更改为

Selection: {{selection}}

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

进行调用

Answer 2

您只需要替换一行即可。

使用

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

一个。

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

Answer 3

由于您具有与formGroup关联的formcontrol，因此无法访问options.name之类的选项表单控件，而是可以使用getters

使用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

Answer 4

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

要直接使用form

显示选定的值

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

使用吸气剂显示所选值

组件

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

HTML

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

角度7：单击单选按钮时显示值

4 个答案: