Angular 正式 - 禁用单个单选选项

Question

我正在尝试通过 angular 表单字段禁用一个单选按钮（例如第一个）选项。

          options: [
            {
              value: 1,
              label: 1,
            },
            {
              value: 2,
              label: 2
            },
            {
              value: 3,
              label: 3
            }
          ]

这行不通

                {
                  value: 1,
                  label: 1,
                  disable: 'true' //also tried true or 'disabled'
                },

我也试过下面的方法，可惜没有成功

        hooks: {
          onInit: (field) => {
            field.expressionProperties.options[0].disabled = true;
          }

有人知道我怎样才能做到这一点吗？在 HTML 中很容易设置 disabled="disabled" 属性..

Answer 1

一般有两种方式：

使用[attr.disabled]
使用 fieldset 标签

Using [attr.disabled]

<input type="radio" name="enabled" [attr.disabled]="null" />Enabled radio
<input type="radio" name="disabled" [attr.disabled]="false" />Disabled radio

Using fieldset tag

<fieldset [disabled]=true>
    <input type="radio" name="fieldsetTest" />Disable
</fieldset>

如果你想在你的 Component.ts 中动态控制 disable\enable 你可以尝试这样的事情：

Component.ts

options = [
          {
           value: 1,
           label: 1,
           disable: null //for 'disabled' mode
           },
           {
           value: 2,
           label: 2,
           disable: 'false' //for 'enable' mode
           },
];

Component.html

<div *ngFor="let option of options">
  <input type="radio" name="enabled" [attr.disabled]="option.disable" />
</div>

Answer 2

问题是我的@ngx-formly/core 版本

过时了

我从 5.5.1 更新到 5.10.1，现在可以使用了

Angular 正式 - 禁用单个单选选项

Angular Formly - Disable individual Radio Options

angular

angular-formly