Angular 8 доб и возрастные автоматы c расчет - PullRequest
Новая
       21

Angular 8 доб и возрастные автоматы c расчет

0 голосов
/ 09 апреля 2020

в моей angular (8) заявке, имеющей форму реагирования, есть два поля:

  1. dob (дата рождения, тип даты)
  2. и возраст

Я уже выполнил расчет возраста, зависит от выбора каландра доб. Код следующий 

dob: new FormControl('', Validators.required),
 age: new FormControl('', Validators.max(120)),

и html: 

<div class="row clearfix">
                      <div class="col-sm-3">
                        <div class="form-group">
                          <label for="dob">Date Of Birth (mm/dd/yyyy)
                            <span style="color: red;">*</span></label>
                          <div class="input-field col s12">
                            <input type="date" class="flatPicker" ngbDatepicker #d="ngbDatepicker" [readonly]="true"
                              [minDate]="{ year: 1900, month: 1, day: 1 }" formControlName="dob" [maxDate]="maxDate"
                              #dobToDisplay />
                            <button class="flatPicker" (click)="d.toggle()">
                              <span class="fa fa-calendar">{{dobToDisplay.value | date}}</span>
                            </button>

                            <div *ngIf="
                                patientForm.controls.dob.touched &&
                                !patientForm.controls.dob.valid
                              " class="text text-danger">
                              Date of Birth is required
                            </div>
                          </div>
                        </div>
                      </div>

                      <div class="col-sm-3">
                        <label for="age">Age<span style="color: red;">*</span></label>
                        <div class="input-field col s12">
                          <input id="age" type="text" formControlName="age" type="number" />
                          <div *ngIf="
                          patientForm.controls.age.touched &&
                          !patientForm.controls.age.valid
                        " class="text text-danger">
                        Age entry is wrong
                      </div>
                        </div>
                      </div>

сейчас звоню valueChanges.subscribe

 ngOnInit() {
  this.dobValueChanged();
    this.ageValueChanged();

  }

и 

dobValueChanged() {
    this.patientForm.get('dob').valueChanges.subscribe(
      (dob: Date) => {

        let oDob
        if (dob != null) {
          oDob = new Date(dob['year'], dob['month'] - 1, dob['day']);
          //console.log(oDob);
          const today = new Date();
          let age = today.getFullYear() - oDob.getFullYear();
          //console.log(age);

          // this.patientForm.setValue({ age: age });

          this.patientForm.patchValue(
            { age: age }
          );
        }

      }
    );
  }

там, где работает нормально, и выбор даты, это расчет возраста и установка моего возраста. Теперь аналогичным образом хочу установить DOB, при любой записи в поле возраста. и это метод. где я рассчитываю год на основе возраста, а месяц и день будут сегодня месяцем и днем. и преобразование в 'MM / dd / yyyy' и исправление, но это не работает. 

ageValueChanged() {
    const todayYear: number = this.today.getFullYear();
    this.patientForm.get('age').valueChanges.subscribe(
      age => {

        const today = new Date();

        console.log(todayYear);
        const calculatedDobYear = (todayYear - age) - 1;
        console.log(calculatedDobYear);


        const calculatedDob = new Date(calculatedDobYear, today.getMonth(), today.getDate());
        console.log(calculatedDob);

        const pipe = new DatePipe('en-US');

        const myFormattedDate = pipe.transform(calculatedDob, 'MM/dd/yyyy');
        console.log(myFormattedDate);

        // const toSet = this.datePipe.transform(calculatedDob, 'yyyy-MM-dd');

        // const toSet = calculatedDob.toISOString().substring(0, 10);

        //console.log(toSet);

        this.patientForm.patchValue(
          { dob: myFormattedDate }
        );
      }    
    );  
  }
...