Tengo curiosidad por saber si hay alguna forma de agregar una advertencia personalizada en la consola, similar a la advertencia que arroja Angular cuando intenta usar el atributo "deshabilitado" en una entrada que ya está vinculada a un FormControl en el archivo .ts . Básicamente, Angular le aconseja que modifique el atributo 'deshabilitado' en el propio FormControl en el mosaico .ts, en lugar de especificar el atributo HTML en la plantilla.
Para garantizar que el código de manipulación del 'estado' de FormControl se realice en el archivo .ts por completo, también me gustaría lanzar una advertencia similar en la consola cada vez que alguien intente usar dicha propiedad 'requerida' en la plantilla HTML en lugar de agregar el validador Validators.required al FormControl directamente.
¿Cuál es una buena manera de implementar tal advertencia?
Mire reactive_errors.ts
:
static disabledAttrWarning(): void { console.warn(` 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) }); `); }
Básicamente, eso es solo un console.warn
bien escrito. Para hacer algo similar con la propiedad required
, puede detectar los elementos con una directiva usando el selector [required]
y agregar una console.warn
. advertir en su ' ngAfterViewInit()
Como se menciona en otra respuesta, puede crear una directiva para esto. Querría dirigirse a los campos que tienen un control de formulario o un nombre de control de formulario, aquí está formControlName
:
@Directive({ selector: 'input[formControlName]' }) export class RequiredDirective { constructor(private el: ElementRef) { if (this.el.nativeElement.required) { console.error("set the required attribute on the formcontrol") } } }
DEMOSTRACIÓN: https://stackblitz.com/edit/angular-gfbvbg?file=src%2Fapp%2Frequired.directive.ts