Как добавить валидаторы типа реактивных форм для данных другой модели

Question

Model.ts

export class Model{
    name:string;
    phone:number;
}

registration.ts

import {Model} from './Model.ts';

export class RegistrationComponent{

    ngOnInit(){
        public objModel:Model;
    }
    saveClick(){

    }
}

registration.html

<input type="text" [(ngModel)]="objModel.name" />
<input type="phone" [(ngModel)]="objModel.phone" />
<button (click)="saveClick()">Save</button>

Я создаю форму с внешним управлением моделью, используя [(ngModel)]. Как я могу добавить валидацию, как требуется, минимальной длины, как Reactive Forms / Model Driven формы подход в угловых 2. Это правильно, я делаю ..?

Answer 1

Вы должны использовать FormGroup .

Используйте [formGroup]="myForm". Можно будет отправить запрос, только если валидаторы для каждого поля удовлетворены. Последние связаны через formControlName. Кнопка будет отключена, пока все валидаторы не будут удовлетворены.

registration.component.html:

<form [formGroup]="registrationForm" (ngSubmit)="onSubmit()">
    <p class="form-group">
        <label for="username">Name</label>
        <input
                id="name"
                type="text"
                name="name"
                formControlName="name"
                value=""
                class="form-control"
        />
        <span class="invalid-feedback">
          Please provide a valid name.
        </span>
    </p>
    <p class="form-group">
        <label for="phone">Telephone</label>
        <input
                id="telephone"
                type="text"
                name="telephone"
                formControlName="telephone"
                value=""
                class="form-control"
        />
        <span class="invalid-feedback">
          Please provide a valid telephone number.
        </span>
    </p>
    <p>
        <button
                type="submit"
                class="btn btn-primary btn-block"
                [disabled]="!registrationForm.valid"
                translate
        >Sign In</button>
    </p>
</form>

registration.component.ts

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

export interface Model {
    name?: string;
    telephone?: string;
}

@Component({
    selector: 'app-registration-form',
    templateUrl: './registration.component.html'
})
export class RegistrationComponent implements OnInit {

    registrationForm: FormGroup;

    ngOnInit() {
        if (
            this.registrationForm === undefined ||
            this.registrationForm === null
        ) {
            this.registrationForm = new FormGroup( {
                name: new FormControl('', Validators.required, Validators.minLength(1)),
                telephone:new FormControl('', Validators.required, Validators.minLength(1))
            });
        }
    }

    onSubmit() {

        if ( this.registrationForm.valid ) {

            const formValue = this.registrationForm.value;

            const model: Model = {
                name: formValue.name,
                telephone: formValue.telephone
            };

            console.log('model', model);
        }
    }

}

Вы можете прочитать больше здесь . Вы можете использовать любой вид валидаторов, вы также можете создать свой. Например, вы можете применить регулярное выражение к своему номеру телефона, чтобы понять, является ли ввод действительным, используя Validators.Pattern('yourRegxTelephonePattern').