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

Question

Меня попросили сделать регистрацию пользователя для веб-сайта "X". Администратор этого веб-сайта X хочет управлять этим из поля и выполнять следующие операции:

1. Добавление полей и проверка.
2. Сортировка полей.

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

это выполнимо с угловым 6?? если да, пожалуйста, дайте мне что-нибудь для начала.

Answer 1

Я создал пример приложения на Stackblitz для проверки динамических полей формы во время выполнения.

Позвольте мне подробно описать, что я сделал для достижения этой цели:

Шаг 1: Разработанный Admin настроил данные JSON.

Для вашего лучшего понимания я добавил два поля формы в JSON с динамической проверкой.

Поле одно (userName): это поле требует динамической проверки с сообщением об ошибке, настроенным сервером, alpha, maxLength и minLength.

Поле два (пароль): для этого поля требуются динамические проверки и проверка пароля, например, 1 специальный символ, минимальная длина 5, максимальная длина 10 и одно числовое значение.

Вот структура JSON:

[{
  "fieldId":1,
  "label":"Username",
  "placeHolder":"Enter your username",
  "value":"",
  "sortId":1,
  "validation":{
    "value":{
      "alpha":true, 
      "required":{"message":"This field is required."},
      "minLength":{"value":5},
      "maxLength":{"value":10}
    }
  }
},{
  "fieldId":2,
  "label":"Password",
  "placeHolder":"Enter your password",
  "value":"",
  "sortId":2,
  "validation":{
    "value":{
      "required":true,
      "password":{ "validation":{
"maxLength": 10,"minLength": 5,"digit": true,"specialCharacter": true
      }
        }
    }
  }
}
]

Шаг 2. Выполните сервисный вызов и получите данные поля формы.

Для генерации FormGroup с динамической проверкой я использовал RxFormBuilder, он является частью пакета " @ rxweb / реактивный-форма-валидаторы ". Это создает объект Angular FormGroup с динамической проверкой на соответствующем элементе управления формы.

Вот Генерация кода FormGroup:

dynamicFormGroup: FormGroup;
formFields:any[];

    constructor(
        private formBuilder: RxFormBuilder,     private http: HttpClient
    ) { }
  ngOnInit(){
     this.http.get('assets/questions.json').subscribe((formFields:any[]) => {
            this.formFields = formFields;
            this.dynamicFormGroup = this.formBuilder.group({
              "questions":formFields
            },{
              includeProps:['questions','questions.value'],
              dynamicValidationConfigurationPropertyName:'validation'
            });
        })
  }

Шаг 3: Привязать HTML в соответствии со стандартной практикой. Вот HTML-код:

 <div [formGroup]="dynamicFormGroup.controls.questions.controls[index]" *ngFor="let row of formFields;let index = index" class="form-group">
  <label>{{row.label}}</label>
  <input type="text" formControlName="value" class="form-control" />
  {{dynamicFormGroup.controls.questions.controls[index].controls.value.errors | json}}
</div>

Почему я использовал @ rxweb / реактивные-формы-валидаторы?

То же самое может быть возможно при стандартном подходе Angular без использования сторонней библиотеки, такой как @ rxweb / реактивные-формы-валидаторы, но мне нужно написать слишком много кода в компоненте, а также мне нужно создать множество пользовательских валидаторов и применить FormControl на основе данных сервера.

Несколько основных вещей, чтобы выбрать этот подход:

1. Мне не нужно создавать FormArray, FormGroup и FormControl на основе данных JSON. RxFormBuilder автоматически создает все три вещи на основе предоставленных данных сервера.

2. Мне не нужно писать условие if/else для привязки валидаторов в соответствующем FormControl. С @ rxweb / реактивные-формы-валидаторы автоматически управляются на основе правил проверки вашего сервера.

3. @ rxweb / реактивный-форма-валидаторы предоставляет более 50 динамических валидаторов. Пожалуйста, проверьте http://rxweb.io/

4. Код будет намного чище, чем стандартный угловой подход.

Вы можете изменить структуру JSON и HTML в соответствии с потребностями вашего приложения. Пожалуйста, дайте мне знать, если у вас есть какие-либо вопросы.

Шаги, которые я выполнил, чтобы заставить его работать с @ rxweb / реактивной формой-валидаторами:

1. npm install @ rxweb / реактивная форма-валидаторы
2. импортировать 'RxReactiveFormsModule' в корневой модуль.
3. разрешить службу 'RxFormBuilder' в компоненте и использовать групповой метод для создания FormGroup.