javascript - 如何禁用没有 id 的单选选项按钮并使用 angular renderer2

Question

我试图在不使用 id 的情况下禁用男性单选按钮。并使用 Angular 渲染2。但没有工作。不改变 html，只改变 form.ts 文件

表单.html

  <label>
    <input type="radio"  value="male" formControlName="gender">
      <span>male</span>
  </label>
  <label>
    <input  type="radio" value="female" formControlName="gender">
      <span>female</span>
  </label>
</form>

表单.ts

import { Component, OnInit , Renderer2, ElementRef, ViewChild} from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import * as $ from 'jquery';
@Component({
  selector: 'app-reg-form',
  templateUrl: './reg-form.component.html',
  styleUrls: ['./reg-form.component.css']
})
export class RegFormComponent implements OnInit {
  form: FormGroup;
  @ViewChild('gender', {static: false}) Input: ElementRef;
  constructor(fb: FormBuilder, private renderer: Renderer2) {

    this.form = fb.group({
      gender: ['male', [Validators.required]]

    });
  }
  ngOnInit() {

this.renderer.setProperty(this.Input, 'disabled', 'true');

  }

}

Answer 1

为什么不使用这样的组件变量禁用

<input type="radio" name="disabled" [attr.disabled]="isDisabled" />

在你的组件中

export class RegFormComponent implements OnInit {
  form: FormGroup;
  isDisabled: boolean;
  @ViewChild('gender', {static: false}) Input: ElementRef;
  constructor(fb: FormBuilder, private renderer: Renderer2) {

    this.form = fb.group({
      gender: ['male', [Validators.required]]

    });
  }
  ngOnInit() {

this.renderer.setProperty(this.Input, 'disabled', 'true');
    this.isDisabled = false;
  }

}