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
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich habe ein Problem auf github und stellt sich heraus, dass dies das gewünschte Verhalten.
Mein Fehler hier war, um zu überprüfen, jedes Feld für seine Wirksamkeit anstelle der überprüfung der gesamten form.
InformationsquelleAutor Supamiu
Gibt es mehrere Fragen zu diesem Thema offen auf GitHub. Da erlebte ich das gleiche, ich habe versucht, zum erstellen einer benutzerdefinierten Richtlinie zur Versorgung der desidered Verhalten.
Folgen, auf dem Laufenden zu diesem Thema:
https://github.com/angular/angular/issues/11379#issuecomment-246756547
InformationsquelleAutor user2363245