Создайте отдельный файл для проверки, чтобы я мог использовать его в другом компоненте

Question

Я очень новичок в angular 7 Я создал для добавления нового учителя, он содержит различные поля и каждое поле имеет проверку, у меня есть файл

add-teacher.component.ts

, он содержит все логи c чтобы добавить учителя, а также проверку, но я хочу создать другой файл для проверки, чтобы в будущем я мог использовать этот файл проверки для добавления учащегося, сейчас я использую этот способ проверки:

add-teacher.component.ts

@Component({
  selector: 'app-add-teacher',
  templateUrl: './add-teacher.component.html',
  styleUrls: ['./add-teacher.component.css']
})
export class AddTeacherComponent implements OnInit {

  teachers: Teacher[] = [];

  teachersValidation = new FormGroup({
    userName: new FormControl('', [
      Validators.required
    ]),
    fullName: new FormControl('',[
      Validators.required
    ]),
    branch: new FormControl('',[
      Validators.required
    ]),
    subject: new FormControl('',[
      Validators.required
    ]),
    semester: new FormControl('',[
      Validators.required
    ]),
    password: new FormControl('',[
      Validators.required,
      Validators.pattern("(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&].{8,}")
    ])
  })

  get validations() {
    return this.teachersValidation.controls;
  }
}

add-teacher. html

<div class="container">
    <form>
        <div class="form-group" #userform="ngForm" [formGroup]="teachersValidation">
          <label for="exampleInputEmail1">user name</label>
          <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" 
          [(ngModel)]="teachers.userName" name="userName" placeholder="Enter User Name" formControlName="userName">
          <div *ngIf="(validations.userName.invalid && validations.userName.touched) || validations.userName.dirty">
              <small *ngIf="validations.userName.errors?.required" class="text-danger">Name is required</small>
              <!--question mark(?) is a safe navigation operator-->
              <small *ngIf="validations.userName.errors?.pattern" class="text-danger">Please provide a valid password</small>
            </div>
        </div>

        <div class="form-group" #userform="ngForm" [formGroup]="teachersValidation">
          <label for="exampleInputEmail1">Full Name</label>
          <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" 
          [(ngModel)]="teachers.fullName" name="fullName" placeholder="Enter User Name" formControlName="fullName">
          <div *ngIf="(validations.fullName.invalid && validations.fullName.touched) || validations.fullName.dirty">
              <small *ngIf="validations.fullName.errors?.required" class="text-danger">Full Name is required</small>
              <!--question mark(?) is a safe navigation operator-->
            </div>
        </div>

----------------------------

, поэтому не могли бы вы предоставить мне код, который использует тот же тип проверки, но в другом файле, чтобы я мог вызывать его методы в любое время.

Спасибо.

Answer 1

Я думаю, вы должны прочитать о пользовательских проверках в Angular. Оттуда можно получить представление. Вы можете создать обобщенные c функции проверки и применять их при необходимости.

Посмотрите на приведенный ниже вид

https://angular.io/guide/form-validation#custom -validators

https://www.positronx.io/angular-8-custom-validation-tutorial-with-examples/