Как сделать угловой компонент 2 ng-invalid

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 /> если я запускаю его, вход прибудет нг-инвалид, но не домен-base- значение и форму. Я могу переместить 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 и имеет атрибуты нг-недействительные
• Ваша форма, которая вызывает компонент не знает о поле ввода недопустимого в 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>