Question

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

这是我的表单模板/视图：

slim.port

这是域基值组件视图： <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> 如果我运行它，输入得到ng-invalid但不是domain-base-value和表单。我可以将<input [(ngModel)]="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兼容的组件”部分）：

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

另见这个问题：

angular2 wysiwyg tinymce implementation and 2-way-binding

Answer 2

使用disabled来完成此操作

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

Answer 3

重复：

你有一个组件，它包含一个输入字段。
此输入字段本身是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，您现在应该在表单上看到正确的属性。

希望这有帮助。

如何使angular2组件无效

3 个答案: