0

У меня есть условия где после id="confirm_Password" создаю или удаляю элемент span с содержимой, но это сделано с помощью Jquery, можете помощь его преобразовать в чистый typescript

if (data['password'] == data['confirm_Password']) {
                    $('.confirm_Password_message').remove();
                } else {

                     $('<span class="confirm_Password_message">Passwords do not match</span>').insertAfter($('#confirm_Password'));
                }

form

config: FieldConfig[] = [
        {
            type: 'textarea',
            label: 'Description',
            name: 'description',
            placeholder: 'Description',
            value: '',
            validation: [
                {
                    name: 'required',
                    validator: Validators.required,
                    message: 'Description Required'
                }
            ]
        },
        {
            type: 'checkbox',
            label: 'Status',
            name: 'status',
            value: ''
        },
        {
            label: 'Submit',
            name: 'submit',
            type: 'button',
        }
    ];

form html

<div class="modal-body">
        <app-dynamic-form #form="appDynamicForm" (submit)="formSubmitted($event)" [config]="config"></app-dynamic-form>
        <button type="button" class="btn btn-default float-right mr-2"  (click)="hideModal()">Close</button>
      </div>
1
  • сообщение для description - показывается? если да, то нужно делать по аналогии и добавить свой валидатор для нужного поля
    – Grundy
    23 авг 2018 в 11:53

2 ответа 2

1

Реактивные формы позволяют писать кастомную валидацию, свой компонент вы не показали, поэтому я приведу вам небольшой пример:

public form = new FormGroup({
    passwords: new FormGroup({
        password: new FormControl(null),
        confirmedPassword: new FormControl(null)
    }, {
        validators: [
            (control: AbstractControl): ValidationErrors | null => {
                const password = control.get('password').value;
                const confirmedPassword = control.get('confirmedPassword').value;

                if (password === confirmedPassword) {
                    return null;
                }

                return {
                    passwordsMissmatch: true
                };
            }
        ]
    })
});

public get passwordsMissmatch(): boolean {
    return this.form.get('passwords').hasError('passwordsMissmatch');
}

Если вы создаете компонент вручную через ComponentFactoryResolver, то вы можете получить это свойство из инстанса:

const factory = this.resolver.resolveComponentFactory...
const componentRef: ComponentRef<SomeComponent> = factory.create(this.injector);
console.log(componentRef.instance.passwordsMissmatch);

Или слушать изменение формы:

const { instance } = componentRef;

instance.form.valueChanges.subscribe(() => {
    console.log(instance.passwordsMissmatch);
});
-1

Вот простое решение вашей задачи с использованием "template reference variables" :

<input #password (keyup)="0">
<input #confirmPassword (keyup)="0" >
<span *ngIf="password.value !== confirmPassword.value">Passwords do not match</span>
7
  • Да, но input я создаю в typescript, нужно чтобы сообщения тоже создать через typescript 23 авг 2018 в 10:02
  • Поясните, пожалуйста, в чем заключается причина создания input в typescript 23 авг 2018 в 10:08
  • У меня angular dynamic form toddmotto.com/angular-dynamic-components-forms 23 авг 2018 в 10:10
  • @AraChinaryan, в чем принципиальная разница между инпутом и спаном в данном случае?
    – Grundy
    23 авг 2018 в 10:34
  • @Grundy так как у меня почти нету html кода, я нее могу просто взять и в html написать span и *ngIf, можно только в typescript, но создал через Jquery я тоже не восторге от этой структуры, хочу понять typescript дает мне такие возможности (создать и удалять элемент) как Jquery, если нет буду это оставлять, я просто новичок. 23 авг 2018 в 10:49

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.