主页 / 问题 / 872405
Accepted
Ara Chinaryan
Asked:2020-08-23 17:11:28 +0000 UTC2020-08-23 17:11:28 +0000 UTC

Angular 6 创建带有内容的标签

  • 772

我有条件在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'));
                }

形式

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',
        }
    ];

表单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>
angular5

2 个回答

  1. Best Answer

    反应式表单允许你编写自定义验证，你没有显示你的组件，所以我给你一个小例子：

    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

  2. 这是使用“模板引用变量”解决问题的简单方法：

    <input #password (keyup)="0">
<input #confirmPassword (keyup)="0" >
<span *ngIf="password.value !== confirmPassword.value">Passwords do not match</span>
    • -1

相关问题