Как сделать компонент angular2 ng-invalid

Мне нужно написать компонент, который можно использовать в форме. Я хочу опубликовать его как 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 /> если я его запускаю, входные данные получают ng-invalid, но не базовое значение домена и форму. Я могу переместить required в форму, но я хочу, чтобы дочерний компонент имел логику, когда он действителен, а когда нет. какие-либо предложения?


angular angular2-forms angular2-template
person Brachi    schedule 30.06.2016    source источник

Ответы (3)


arrow_upward
0
arrow_downward

Вам нужно сделать ваш подкомпонент совместимым с 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»):

См. также этот вопрос:

person Thierry Templier    schedule 30.06.2016
comment
Я уже привязан к ngModel. Но я спрашиваю о проверке. Вы не показали, как сделать дочерний компонент недействительным. Я имею в виду получить класс ng-invalid. - person Brachi; 30.06.2016

arrow_upward
0
arrow_downward

Используйте 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>
person byteC0de    schedule 20.03.2017

arrow_upward
-1
arrow_downward

Повторять:

  • У вас есть компонент, который содержит поле ввода.
  • Само это поле ввода является 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, и теперь вы должны увидеть правильные атрибуты в своей форме.

Надеюсь это поможет.

person Eric    schedule 21.12.2016