Impostazione della validità di un controllo Angular 2 da un componente personalizzato

Ho un componente Ng2 personalizzato a Sto utilizzando l'approccio Model-Driven.Impostazione della validità di un controllo Angular 2 da un componente personalizzato

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

Così dentro la mia componente personalizzato ho tutta la logica che ho bisogno, ma non riesco a trovare un modo per ottenere un riferimento al ngControl per impostarlo valido o non valido da dentro la mia componente personalizzato.

fonte

2016-06-07 Brett

si può dare tutto il controllo dei componenti in modo [pippo] o [(foo)] . il modo in cui basta aggiungere il controllo nello stesso file .ts e passare l'intero controllo al componente [foo] = "fbgroup.find ('currentValue')" – mayur

Ho trovato un modo per ottenere "un" o "il" NgControl (atm I am non sono sicuro di quello che sto ricevendo) tramite '' 'this._control = this._injector.get (NgControl, null);' '' ma non so come impostarlo su non valido per testarlo ... – Brett

Immagino che tu possa semplicemente iniettare 'NgControl'' constructor (private ngControl: NgControl) 'nel tuo componente senza iniettare l'iniettore e ottenerlo da lì. In 'NgControl' puoi aggiungere ulteriori validatori o usare' setErrors() '(non testato) –

-1

this.myForm.controls['currentValue']....

ma al momento non c'è modo di impostare esplicitamente a valid o invalid.

È possibile definire un validatore e modificare i criteri in modo che contrassegni il controllo non valido.

Vedi per esempio https://github.com/angular/angular/issues/4933

fonte

2016-06-07 04:20:35

Non ho accesso a '' this.myForm''' all'interno del componente. Il validatore personalizzato è un'idea ma sembra un modo indiretto di farlo ... c'è un evento che posso emettere per innescare lo stato non valido? – Brett

Non per quanto ne so. Puoi fornire più codice. Per me non è chiaro cosa stai effettivamente facendo o cercando di realizzare. Potresti voler passare il modulo o il controllo al tuo componente personalizzato. –

Sto scrivendo un componente personalizzato, (un datepicker) il controllo di validità è implementato all'interno del componente. Dall'esterno mi piacerebbe usarlo come un normale modulo di input.Quindi aggiungerei ngControl e registrarlo su un ngFormModel. È più chiaro? – Brett

È possibile controllare questo link per un esempio di lavoro: https://github.com/byavv/angular2-playground/tree/master/client/app/modules/forms_explore

Alcuni aspetti fondamentali:
è necessario implementare ControValueAccessor.

export class Datepicker implements ControlValueAccessor {

Iniettare nel componente del ngControl e registrarlo:

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

Dall'interno componente si dovrebbe avere una forma che convalida il campo in modo è possibile iscriversi per emettere il valore corretto o impostare l'errore del modulo genitore ngControl.

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

fonte

2016-06-08 02:47:48 Brett

-1

Come impostare VALIDO o NON VALIDO su qualsiasi formGroup

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

fonte

2017-11-17 20:04:55 SoEzPz

Impostazione della validità di un controllo Angular 2 da un componente personalizzato

risposta

Problemi correlati