如何使angular2组件ng-invalid

Question

我需要编写一个可以在表单中使用的组件。我想将其发布为表单的 ng-invalid。

这是我的表格template/view:

    <form  #myForm="ngForm">        
    <domain-base-value  [(ngModel)]="value.value" name="bla" #bla="ngModel">
    </domain-base-value>
    <div [hidden]="myForm.valid || myForm.pristine">
      Form is not valid
    </div>
    </form>

即domain-base-value组件视图： <input [(ngModel)]="value" required /> 如果我运行它，输入得到 ng-invalid 但不是 domain-base-value 和表单。我可以将 required 移动到表单，但我希望子组件在有效和无效时具有逻辑。有什么建议吗？

Answer 1

您需要通过实现自定义值访问器来使您的子组件与 ngModel 兼容。这样您就可以使用 ngModel 和 ngFormControl 等指令来应用验证器。

这是一个示例：

const MY_VALUE_ACCESSOR = new Provider(
  NG_VALUE_ACCESSOR, {useExisting: forwardRef(() => MyInputComponent), multi: true});

@Component({
  (...)
  providers: [ MY_VALUE_ACCESSOR ]
})
export class MyInputComponent extends DefaultValueAccessor {
  onChange = (_) => {};
  onTouched = () => {};

  writeValue(value:any):void {
    if (value!=null) {
      super.writeValue(value.toString());
    }
  }

  // call when your internal input is updated
  doOnChange(val) {
    this.onChange(val);
  }
}

有关详细信息，请参阅本文（第 "NgModel-compatible component" 部分）：

http://restlet.com/blog/2016/02/17/implementing-angular2-forms-beyond-basics-part-2/

另见这个问题：

Answer 2

重复：

您有一个组件，它包含一个输入字段。
这个输入字段本身是一个 ngModel 并且具有 ng-invalid 属性
调用该组件的表单不知道 domain-base-value 组件中的无效输入字段

我认为问题在于，您的 ngForm 不知道组件内的输入字段。我的解决方案是将 ngForm 作为 @Input 参数添加到 domain-base-value 组件，并在组件内部将 ngModel 添加到表单。您的表单如下所示：

<form  #myForm="ngForm">
    <domain-base-value  
        [(ngModel)]="value.value" 
        name="bla" 
        #bla="ngModel"
        [form]="myForm"
    >
    </domain-base-value>
    <div [hidden]="myForm.valid || myForm.pristine">
        Form is not valid
    </div>
 </form>

在您的组件内部，它看起来像：

@Component({...})
export class DomainBaseValue implements OnInit {

    @Input() form: NgForm;

    @ViewChild('input1') input1;

    ngOnInit() {
        this.form.addControl(this.input1);
    }

}

这应该将 NgModel 附加到您的 NgForm，您现在应该会在表单上看到正确的属性。

希望这对您有所帮助。

Answer 3

使用禁用来完成这个

<form  #myForm="ngForm">
    <domain-base-value  [(ngModel)]="value.value" name="bla" #bla="ngModel">
    </domain-base-value>
    <div [disabled]="!form.valid || form.pristine">
      Form is not valid
    </div>
</form>

如何使angular2组件ng-invalid

How to make angular2 component ng-invalid

angular2-forms

angular2-template

angular