禁用动态表单中的输入验证 [英] Disabled input validation in dynamic form

问题描述

我有一个动态表单(使用 angular.io 动态表单 live example plunkr 做了一个示例)，我想禁用此表单的输入，以将其显示为只读信息.

I have a dynamic form (made an example using angular.io dynamic form live example plunkr) and I want to disable an input of this form, to display it as a readonly information.

所以我决定在问题模型中添加 disabled 属性:

So I decided to add disabled attribute to the question model:

export class QuestionBase<T>{
  value: T;
  key: string;
  label: string;
  required: boolean;
  order: number;
  controlType: string;
  disabled?:boolean;

  constructor(options: {
      value?: T,
      key?: string,
      label?: string,
      required?: boolean,
      order?: number,
      controlType?: string,
      disabled?:boolean
    } = {}) {
    this.value = options.value;
    this.key = options.key || '';
    this.label = options.label || '';
    this.required = !!options.required;
    this.order = options.order === undefined ? 1 : options.order;
    this.controlType = options.controlType || '';
    this.disabled = options.disabled || false;
  }
}

然后我将 disabled 绑定到输入:

And then I bind disabled to the input:

<input *ngSwitchCase="'textbox'" [disabled]="question.disabled" [formControlName]="question.key"
            [id]="question.key" [type]="question.type">

我收到警告，但输入未禁用:

I get a warning, and the input is not disabled:

It looks like you're using the disabled attribute with a reactive form directive. If you set disabled to true
      when you set up this control in your component class, the disabled attribute will actually be set in the DOM for
      you. We recommend using this approach to avoid 'changed after checked' errors.

      Example: 
      form = new FormGroup({
        first: new FormControl({value: 'Nancy', disabled: true}, Validators.required),
        last: new FormControl('Drew', Validators.required)
      });

所以我确实喜欢它写在警告中，但我遇到了一个问题，验证器似乎不喜欢禁用字段，即使它没有被标记为必需的.

So I did like it's written in the warning and I get a problem, validator seems to not like the disabled field, even if it's not marked as required.

这是我对新 QuestionControlService 类的更改:

Here is what I changed the new QuestionControlService class:

@Injectable()
export class QuestionControlService {
  constructor() { }

  toFormGroup(questions: QuestionBase<any>[] ) {
    let group: any = {};

    questions.forEach(question => {
      group[question.key] = question.required ? new FormControl({value: question.value || '', disabled: question.disabled}, Validators.required)
                                              : new FormControl({value: question.value || '', disabled: question.disabled});
    });
    return new FormGroup(group);
  }
}

问题

disabled test 字段被禁用，但无效，这是不可能的，因为它根本没有被修改.

Problem

The disabled test field is disabled, but not valid, which should not be possible since it has not been modified at all.

Plunkr 针对我的问题:http://plnkr.co/edit/qSDnD2xWWUwafyToDNX1?p=preview

Plunkr for my issue: http://plnkr.co/edit/qSDnD2xWWUwafyToDNX1?p=preview

推荐答案

我在 github 上提交了一个问题 事实证明这是所需的行为.

I submitted an issue on github and turns out that this is the desired behaviour.

我的错误是检查每个字段的有效性，而不是检查整个表单.

My error here was to check each field for its validity instead of checking the whole form.

这篇关于禁用动态表单中的输入验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！