禁用动态形式的输入验证

Question

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

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

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 绑定到输入：

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

我收到警告，输入未被禁用：

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)
      });

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

下面是我改的新的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字段被禁用，但无效，这应该是不可能的，因为它根本没有被修改过。

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

Answer 1

我在 github 上提交了一个问题，结果证明这是所需的行为。

我这里的错误是检查每个字段的有效性而不是检查整个表格。

Answer 2

GitHub 上有几个关于此主题的问题未解决。由于我遇到了同样的情况，因此我尝试构建一个自定义指令来提供所需的行为。

@Directive({
  selector: '[formControlName][dynamicDisable]'
})
export class DynamicDisable implements OnInit, OnChanges {
  constructor(
    @Optional() @Host() @SkipSelf() private parent: ControlContainer,
  ) { 

  }

  @Input() formControlName: string;  
  @Input() dynamicDisable: boolean;

  private ctrl: AbstractControl;

  ngOnInit() { 
    if(this.parent && this.parent["form"]) {
      this.ctrl = (<FormGroup>this.parent["form"]).get(this.formControlName);
    }
  }

  ngOnChanges() {
    if (!this.ctrl) return;

    if (this.dynamicDisable) {
      this.ctrl.disable();
    }
    else {
      this.ctrl.enable();
    }
  }
}

关注此问题的更新： https://github.com/angular/angular/issues/11379#issuecomment-246756547

禁用动态形式的输入验证

Disabled input validation in dynamic form

angular2-forms

angular

问题