Question

我正在使用Angular 6开发Web应用程序。我有一个问题：我想创建一些受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>的包装组件）中正确初始化。问题是这样的（这是一个Angular问题！）：在此用法代码中：

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

对象myForm.valid（其中myForm与上一个模板中的#myForm相关联）即使在文本字段中未输入任何内容，也始终返回true值。此行为是错误的：如果我未在必填字段中插入任何内容，则我希望此值为false。有人可以帮助我吗？

Answer 1

要将验证添加到自定义输入组件，应将以下内容添加到提供程序：

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

您将必须在InputTextComponent中实现默认方法：

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

如果您使用通过 NG_VALUE_ACCESSOR 实现的writeValue（）方法正确更新了组件内名为 value 的属性，然后确保调用（可以通过在您的默认输入上实施更改事件）：

this.propagateChange(this.value);

最后将isRequired输入更改为默认的required属性。

 @Input() required: boolean;

您的NgModel现在应该正确更新。

编辑：为避免使用必填项（但这是正确的方法）。在验证方法中，放置以下代码：

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

发生的事情是当Angular运行自己的验证时，它将调用此方法。当此方法返回除null以外的任何值时，该对象将添加到FormControl＆NgModel的errors属性中。

这是一个巨大的话题，有一些很棒的文章正确地解释了这一切。但是，按照要求，这应该可以解决。

Answer 2

您应该检查表单是否脏了并且有效。因此，两者都必须是真实的。否则，它表明它没有被更改。

Angular：模板驱动表单中的表单验证问题

2 个答案: