Angular: проблема с проверкой формы в форме на основе шаблона

Question

Я занимаюсь разработкой веб-приложения с использованием Angular 6. У меня есть вопрос: я хотел бы создать несколько пользовательских компонентов, основанных на компонентах ввода HTML. Например:

CustomComponent.ts (машинопись)

  @Component({
    selector: 'custom-component',
    templateUrl: './custom-component.html',
    providers: [
       {
         provide: NG_VALUE_ACCESSOR,
         multi: true,
         useExisting: forwardRef(() => InputTextComponent)
       }
    ]
    })
    export class CustomComponent {

      @Input() name: string;
      @Input() isRequired: boolean;
    }

CustomComponent.html (шаблон)

<input type="text"
   [attr.name]="name"
   [required] = "isRequired"
/>

У меня есть эта проблема. Предположим, мы используем мой компонент в этом шаблоне:

<form #myForm="ngForm" ngNativeValidate>
  <custom-component
  name="myName"
  [isRequired] = true
  ngModel
  ></custom-component>
<button type="submit" (click)="method()">Click</button>

Атрибут required правильно инициализируется в <input type="text/> (обернутый компонент <custom-component>). Проблема заключается в следующем (это угловая проблема!): В этом коде использования:

  method() {
    console.log(this.myForm.valid);
  }

Объект myForm.valid (где myForm связан с #myForm в предыдущем шаблоне) всегда возвращает значение true, даже если в текстовое поле ничего не введено. Это неправильное поведение: я хотел бы, чтобы это значение было ложным, если я не вставляю ничего в обязательное поле. Кто-нибудь может мне помочь?

Answer 1

Чтобы добавить проверку к вашему пользовательскому компоненту ввода, вы должны добавить к своим провайдерам следующее:

{
  provide: NG_VALIDATORS,
  useExisting: forwardRef(() => InputTextComponent),
  multi: true
}

Вам необходимо будет реализовать метод по умолчанию в вашем InputTextComponent:

validate(control: AbstractControl): ValidationErrors | null {
    return null;
}

Если вы правильно обновили свойство в своем компоненте с именем value , используя метод writeValue (), который вы реализовали с помощью NG_VALUE_ACCESSOR , а затем гарантировали вызов (вы можете сделать это, применив изменениесобытие на входе по умолчанию):

this.propagateChange(this.value);

Наконец, измените ваш вход isRequired на требуемое свойство по умолчанию.

 @Input() required: boolean;

Теперь ваша NgModel должна корректно обновиться.

Редактировать: Чтобы избежать использования требуется (однако это правильный путь).В методе проверки поместите следующий код:

validate(control: AbstractControl): ValidationErrors | null {
    return this.isRequired && this.value.length === 0 : { required: true } : null;
}

Когда Angular запускает собственную проверку, он вызывает этот метод.Когда этот метод возвращает что-либо, кроме нуля, объект добавляется в свойство errors в FormControl & NgModel.

Это огромная тема, и есть несколько замечательных статей, которые правильно объясняют все это.Однако, как и просили, это должно решить это.

Answer 2

Вы должны проверить, является ли форма грязной и действительна ли она. Так что оба должны быть правдой. В противном случае он показывает, что он не был изменен.