Блог

У меня есть проект Angular, и в нем есть реактивная форма. Два поля принимают введенную вручную дату в формате ‘дд / мм / гггг’. При создании нового элемента с помощью формы проверка работает отлично. Но, когда я устанавливаю значения в форме с помощью patchValues , проверка шаблона в двух полях даты завершается с ошибкой. Однако, если вы удалите символ из даты и повторно введете его, проверка пройдет.

Я создаю форму следующим образом;

 this.form = new FormGroup({
      id: new FormControl(''),
      active: new FormControl(false),
      name: new FormControl('', [Validators.required]),
      availableFrom: new FormControl('', [Validators.required, Validators.pattern(/^(((0[1-9]|[12]d|3[01])/(0[13578]|1[02])/((19|[2-9]d)d{2}))|((0[1-9]|[12]d|30)/(0[13456789]|1[012])/((19|[2-9]d)d{2}))|((0[1-9]|1d|2[0-8])/02/((19|[2-9]d)d{2}))|(29/02/((1[6-9]|[2-9]d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))))$/g)]),
      availableTo: new FormControl('', [Validators.required, Validators.pattern(/^(((0[1-9]|[12]d|3[01])/(0[13578]|1[02])/((19|[2-9]d)d{2}))|((0[1-9]|[12]d|30)/(0[13456789]|1[012])/((19|[2-9]d)d{2}))|((0[1-9]|1d|2[0-8])/02/((19|[2-9]d)d{2}))|(29/02/((1[6-9]|[2-9]d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))))$/g)]),
      fuelTypes: new FormControl(null, Validators.required),
      position: new FormControl('', Validators.required),
      linkUrl: new FormControl('', [this.urlValidator, Validators.pattern(urlPattern)]),
      imageUrl: new FormControl('', Validators.required),
      reference: new FormControl(''),
      advertiser: new FormControl(''),
      tenants: new FormControl([], Validators.required)
    });
 

и обновление значения forms в onEditAdvert функции;

 onEditAdvert(advert: any) {
    this.form.reset();
    this.form.patchValue({
      id: advert.id,
      active: advert.active,
      name: advert.name,
      linkUrl: advert.linkUrl,
      imageUrl: advert.imageUrl,
      availableFrom: advert.availableFrom,
      availableTo: advert.availableTo,
      fuelTypes: advert.fuelTypes,
      position: advert.positionId,
      reference: advert.reference,
      advertiser: advert.advertiser,
      tenants: [...advert.tenants.map(item => item), 0]
    });
    this.form.get('availableFrom').updateValueAndValidity(); // Added to try and fix the issue
    this.form.get('availableTo').updateValueAndValidity(); // Added to try and fix the issue

    this.advertModal.show();
  }
 

Итак, кажется, что значения в поле, например 01/01/2020, недопустимы при установке через patchValues , но действительны, если вы вводите их вручную.

Может ли кто-нибудь пролить свет на то, почему это может происходить?

Редактировать:

Просто убедитесь, что это полезно. Значения для даты извлекаются через API, а значения даты преобразуются в строку с использованием этого метода;

 public static DateStringToString(dateStr: string): string {
    const dateTime = dateStr.split('T');
    const parts = dateTime[0].split('-');

    return parts[2]   '/'   parts[1]   '/'   parts[0];
  }
 

Возвращаемое значение из этого метода — это то, что задается в полях формы.

HTML для самих полей формы очень прост.

 <div class="col-6">
              <div class="form-group">
                <label>Start Date</label>
                <input type="text" formControlName="availableFrom" placeholder="dd/mm/yyyy">
              </div>
            </div>

            <div class="col-6">
              <div class="form-group">
                <label>End Date</label>
                <input type="text" formControlName="availableTo" placeholder="dd/mm/yyyy">
              </div>
            </div>
 

Если я специально укажу значения для исправления в форме, а не получу значения из объекта advert, у меня та же проблема.

 availableFrom: '01/01/2020',
availableTo: '01/05/2020',
 

Похоже, проблема связана с шаблоном, который проверяет строку.