Validators.required выдает ошибку, даже если в ней есть значение

Question

моя проблема в том, что у меня MatInput следующим образом:

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

В компоненте соответствия я объявил fieldName: string;, и я устанавливаю значение в методе ngOnInit():

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

Дело в том, что на самом деле он работает хорошо (значение отображается правильно), но как только я хочу отправить форму MatDialog, он говорит мне, что я не могу отправить пустую форму! Это потому, что я добавил «обязательный» валидатор:

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

То есть в поле ввода есть значение, но, видимо, Angular его не замечает? Если я добавлю пробел к значению и затем удалю его, значение будет точно таким же, но тогда оно не выдаст никаких ошибок. Кто-нибудь знает, как это исправить? Это действительно раздражает.

Answer 1

value атрибуты в Angular бесполезны.

Если вы хотите присвоить вашему элементу управления значение, сделайте это через сам элемент управления:

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