Validators.required throws an error, even though there is a value inside of it

Question

my issue is that I have a MatInput as follows:

<input matInput [(ngModel)]="name" i18n-placeholder="@@Placeholder" placeholder="Your name" [formControl]="InputControl" value="{{ fieldName }}">

In the correspoding component I declared fieldName: string; and I am setting the value in the ngOnInit() method:

ngOnInit() {
        this.fieldName = "VALUE"; // obtained from server so it may differ
        if(this.fieldName.startsWith("PREFIX")) { // if value starts with a given prefix I want to remove it
            this.fieldName = this.fieldName.substr(3);
        }
}

The thing is that it's actually working well (value gets displayed properly), but as soon as I want to submit the MatDialog form it tells me that I can't submit an empty form! Thats because I added a 'required' validator:

InputControl = new FormControl("", [Validators.required]);

So there is a value in the input field, but apparently Angular doesn't notice it? If I add a space to the value and delete it afterwards the value is exactly the same, but then it doesn't throw any errors. Does anyone know how to fix this? It's really annoying.

You're using `ngModel` but also talking about `FormControl`. These are two conflicting form implementations: `ngModel` two-way data binding can't be used with `FormControl` and viceversa. Either you use the `formControl` directive to bind the to that `FormControl` object, or you use the `required` attribute to make the input required without using FormControl. See also: [What are the practical differences between template-driven and reactive forms?](https://stackoverflow.com/questions/39142616/what-are-the-practical-differences-between-template-driven-and-reactive-forms) — Badashi, Nov 12 '18 at 11:54
you are mixing `ngModel` and value and FormControl, are you sure you want to set value? Perhaps you want to set the `name` of the input `name="{{fieldName}}"`, or you want to set a default value? Then you should update the `this.name = this.fieldName`.. — Poul Kruijt, Nov 12 '18 at 11:54

score 1 · Accepted Answer · answered Nov 12 '18 at 12:22

1

value attributes are worthless in Angular.

If you want to give your control a value, do it through the control itself :

<input matInput [(ngModel)]="name" i18n-placeholder="@@Placeholder" placeholder="Your name" [formControl]="InputControl">

ngOnInit() {
  this.fieldName = "VALUE"; // obtained from server so it may differ
  if(this.fieldName.startsWith("PREFIX")) { 
    this.fieldName = this.fieldName.substr(3);
  }
  // w/ form control
  this.InputControl.setValue(this.fieldName);
  // w/ template driven
  this.name = this.fieldName;
}

answered Nov 12 '18 at 12:22

(Also, listen to comments on your questions and don't use both `formControl` & `ngModel`) – Nov 12 '18 at 12:23
I already tried that but then I got an ExpressionChangedAfterItHasBeenCheckedError exception. – Gereon99 Nov 12 '18 at 13:39
Thanks anyways, I already fixed it, just had to say this.name (model name) instead of my first thought. – Gereon99 Nov 12 '18 at 13:40

Validators.required throws an error, even though there is a value inside of it

1 Answers1