Deaktiviert überprüfung der Eingaben in dynamischer form

Habe ich eine dynamische form (ein Beispiel für die Verwendung eckig.io-dynamische form, live-Beispiel plunkr) und ich wollen zu deaktivieren Eingabe dieses Formular aus, um ihn anzuzeigen, werden die dann als readonly Informationen.

Also beschloss ich, fügen Sie disabled - Attribut auf die Frage, Modell:

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

Dann und ich bind deaktiviert den Eingang:

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

Bekomme ich eine Warnung, und der Eingang nicht abgeschaltet:

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

Also Tat ich, wie es in der SCHRIFTLICHEN Warnung und ich bekomme ein problem, der validator scheint nicht, wie das deaktiviert Feld, auch wenn es nicht gekennzeichnet.

Hier ist was ich geändert habe die neue QuestionControlService Klasse:

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

Problem

Den disabled test Feld ist deaktiviert, aber nicht gültig ist, was nicht möglich sein sollte, denn es wurde nicht verändert.

Plunkr für mein Problem: http://plnkr.co/edit/qSDnD2xWWUwafyToDNX1?p=preview

InformationsquelleAutor Supamiu | 2016-09-07

Schreibe einen Kommentar