如何使angular2组件ng无效

Question

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

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

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

即域基础值组件视图: <input [(ngModel)]="value" required /> 如果我运行它，输入得到ng无效，但不是域基础值和表单。我可以将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同步实现和双向绑定

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 as @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中，现在你就可以在你的表单中看到正确的属性了。