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 you have read our privacy policy.

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