以动态形式禁用输入验证

本文介绍了以动态形式禁用输入验证的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个动态表单(使用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