Методы setValue () и patchValue () элементов управления formBuilder не работают при вызове метода плагина cordova - PullRequest
Новая
       22

Методы setValue () и patchValue () элементов управления formBuilder не работают при вызове метода плагина cordova

0 голосов
/ 17 октября 2019

Я создал приложение для ионных вкладок и должен использовать cordova-plugin-datepicker и использовать Angular Material для отображения полей формы.

Я пытаюсь установить значение ввода текста с датой, полученной из календаря плагина в onSuccess() метод, но он не обновляет ввод. Если я помещаю код вне метода плагина, он работает, например, помещает его в функцию test () и вызывает его в поле, щелкает, он работает и правильно помещает дату в поле ввода.

Мой html: 

<ion-content >
    <div class="ion-text-center tab1-padding">
        <form [formGroup]="newCat" (ngSubmit)="logForm()">
            <mat-form-field appearance="outline" hintLabel="Max 30 caratteri" class="tab1-name-field">
            <mat-label>Nome*</mat-label>
            <input matInput #input maxlength="30" formControlName="name">
            <mat-hint align="end">{{input.value?.length || 0}}/30</mat-hint>
            <mat-error *ngIf="newCat.controls['name'].invalid">Campo obbligatorio</mat-error>
            </mat-form-field>
            <mat-form-field appearance="outline">
            <mat-label>Data di nascita*</mat-label>      
            <input matInput type="text" (click)="viewCalendarAndSetBirthday()" formControlName="birthday">
            <mat-error *ngIf="newCat.controls['birthday'].invalid">Campo obbligatorio</mat-error>
        </mat-form-field>

        <button ion-button type="submit" [disabled]="newCat.pristine || newCat.invalid" class="btn btn-success">Inserisci</button>
        </form>
    </div>
</ion-content>

Мой тс: 

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

declare const datePicker;

@Component({
    selector: 'app-tab1',
    templateUrl: 'tab1.page.html',
    styleUrls: ['tab1.page.scss']
})
export class Tab1Page {

    private newCat: FormGroup;

    constructor(private formBuilder: FormBuilder) {
        this.newCat = this.formBuilder.group({
            name: ['', Validators.compose([Validators.maxLength(30), Validators.required])], birthday: ['', Validators.required]});
    }

    logForm() {
        console.log(this.newCat.value);
    }

    viewCalendarAndSetBirthday() {

        // window.alert('test');  //  is working

        const options = {
            date: new Date(),
            mode: 'date'
        };


        datePicker.show(options, this.onSuccess, this.onError);

    }

    onSuccess(date) {
        window.alert('Selected date: ' + date);//THIS FIRES SO IT ENTERS THE METHOD

        this.newCat.controls.birthday.patchValue(date);
    }

    onError(error) { // Android only
        window.alert('Error: ' + error);
    }

    test() {
        this.newCat.controls.birthday.setValue('ciccio');
        this.newCat.controls.birthday.patchValue('pasticcio');
    }

}

1 Ответ

0 голосов
/ 17 октября 2019

вы можете использовать

  1. this.newCat.controls ['birthday']. SetValue ('ciccio');
  2. this.newCat.patchValue ({birthday: 'ciccio'});
...