以动态形式禁用输入验证 [英] Disabled input validation in dynamic form

问题描述

我有一个动态表单(使用angular.io动态表单实时示例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;
  }
}

然后我将禁用绑定到输入:

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.

针对我的问题的插件: 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屋！