it-swarm.com.de

Festlegen der Gültigkeit von a Angular 2 Steuerung innerhalb einer benutzerdefinierten Komponente

Ich habe eine benutzerdefinierte Ng2-Komponente und verwende den modellgetriebenen Ansatz.

<form [ngFormModel]="myForm" class="layout vertical relative">
    <my-custom-comp ngControl="currentValue"></my-custom-comp>
</form>

Ich habe also in meiner benutzerdefinierten Komponente die gesamte Logik, die ich brauche, aber ich kann keinen Weg finden, einen Verweis auf das ngControl zu erhalten, um es aus meiner benutzerdefinierten Komponente auf gültig oder ungültig zu setzen.

8
Brett

Sie können diesen Link für ein Funktionsbeispiel überprüfen: https://github.com/byavv/angular2-playground/tree/master/client/app/modules/forms_explore

Einige wichtige Aspekte:
Sie müssen ControValueAccessor implementieren.

export class Datepicker implements ControlValueAccessor {

Injizieren Sie in Ihre Komponente das ngControl und registrieren Sie es:

constructor(private ngControl:NgControl)
ngControl.valueAccessor = this;

In Ihrer Komponente sollten Sie über ein Formular verfügen, das das Feld überprüft, sodass Sie den richtigen Wert ausgeben oder den Fehler des übergeordneten ngControl-Formulars festlegen können.

 this.dateForm = builder.group({
          dateControl: ['', Validators.compose([Validators.required, CustomValidators.frenchDate])],
        });

    this.dateForm.valueChanges
      .subscribe((val) => {
        if (this.dateForm.valid) {
          this.onChange.emit(this.dateToTimestamp(val.dateControl));
        } else {
          this.ngControl.control.setErrors({ "wrongDate": true });
        }
      });
7
Brett

Festlegen vonG&UUML;LTIGoderUNG&UUML;LTIGin einer beliebigen FormGruppe

// Where this.form === FormGroup;
// FormGroup can be deeply nested, just call at the level you want to update.
// That level should have direct access to base FormControls

// Can be done in a validator function;
this.form.get('name').setErrors({required: true});
// => this.form.get('name').invalid === true;

// Perhaps on Submit, click, event NOT in validator function
Object.entries(this.form.controls).forEach(([key, ctrl]) => {
  ctrl.updateValueAndValidity();
});
// => this.form.get('name').invalid === false;
// => this.form.get('name').valid === true;
// => this.form.get('name').errors === null;
0
SoEzPz
this.myForm.controls['currentValue']....

es gibt jedoch derzeit keine Möglichkeit, es explizit auf valid oder invalid zu setzen.

Sie können einen Prüfer definieren und die Kriterien so ändern, dass das Steuerelement als ungültig markiert wird. 

Siehe zum Beispiel https://github.com/angular/angular/issues/4933

0