angular2コンポーネントを無効にする方法

Question

フォームで使用できるコンポーネントを記述する必要があります。私はそのフォームのng-invalidとして公開したいと思います。

私のフォームテンプレート/ビューです：

<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 /> 私はそれを実行した場合、入力のget 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 tinymce implementation and 2-way-binding

Answer 2

繰り返すには：

• をあなたが入力フィールドを保持している部品を、持っています。
• 私は問題だと思う。この入力フィールド自体はngModelで、コンポーネントを呼び出す属性はNG-無効
• フォームは、

domain-base-valueコンポーネントに無効な入力フィールドを認識していませんしていますあなたのngFormはあなたのコンポーネントの中の入力フィールドについて知りません。私の解決策は、@入力パラメータとしてngFormをdomain-base-valueコンポーネントに追加し、コンポーネント内にngModelをフォームに追加することです。これはあなたのNgFormにNgModelを追加する必要があり、あなたが今、あなたのフォームに正しい属性が表示されるはずです

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

    @Input() form: NgForm; 

    @ViewChild('input1') input1; 

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

} 

：それは次のようになり、あなたのコンポーネント内

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

：あなたの形式は次のようになります。

これが役に立ちます。

Answer 3

使用すると、私はすでにngModelにバインドされています。この

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