Custom Angular Compiler Errors-CodePudding

I am curious if there is any way I could add a custom warning in the console, similar to the warning Angular throws when you are attempting to use the "disabled" attribute on an input which is already binded to a FormControl in the .ts file. Basically, Angular advises you to modify the 'disabled' attribute on the FormControl itself in the .ts tile, rather than specifying the HTML attribute in the template.

In order to ensure FormControl 'state'-manipulating code is done in the .ts file entirely, I would also like to throw a similar warning in the console whenever someone attempts to use a said 'required' property in the HTML template instead of adding the Validators.required validator to the FormControl directly.

What is a good way to implement such a warning?

CodePudding user response：

Look at 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)
      });
    `);
  }

So basically - that's just a nicely-written console.warn. In order to do something similar with required property, you can detect the elements with a directive using [required] selector - and add a console.warn on its' ngAfterViewInit()

CodePudding user response：

As mentioned in other answer you can create a directive for this. You would want to adress fields that has a formcontrol or formcontrolname, here is 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")
    }
  }
}

DEMO: https://stackblitz.com/edit/angular-gfbvbg?file=src/app/required.directive.ts