Angular 动态日期选择器和动态下拉验证和表单提交

Question

I am newbie in Angular and stuck at once place. I want to get JSON on form submit. The form is custom combination of dynamic dropdown and dynamic mat datepicker . I am not able to validate or get data on submit. Here is my code of component.ts and html files

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

var R_DATA = {
  "grid": {
    "row": {
      "col": [
        {
          "size": 3,
          "label": "Branch",
          "type": "dropdown",
          "id": "branchCd",
          "default": "${userBranchCd}",
          "ddCd": "4"
        },
        {
          "size": 3,
          "label": "From Date",
          "id": "fromDt",
          "type": "date",
          "default": "${currentDate-7}"
        },
        {
          "size": 4,
          "label": "To Date",
          "id": "toDt",
          "type": "date",
          "default": "${currentDate}"
        }
      ]
    }
  }
}

@Component({
  selector: 'app-dynamic-report-viewer',
  templateUrl: './dynamic-report-viewer.component.html',
  styleUrls: ['./dynamic-report-viewer.component.scss']
})
export class DynamicReportViewerComponent implements OnInit {
  testData: string;
  reportData: any;
  showReport: boolean = false;
  @Input() reportForm: FormGroup;
  @Input() reportScreenTitle: string;
  captureParent: any;
  formCol: any;
  formName: string;
  formSubmitted: {};
  constructor() {
    // const currentDate = new Date().getDate;
    // this.minDate = new Date(currentDate - 7);
    // this.maxDate = new Date(currentDate + 1, 11, 31);
   }

  ngOnInit(): void {
    this.testData = '15';
    this.reportData = R_DATA.grid;
    // console.log(this.reportData);
    this.formCol = this.reportData.row.col
    
    
    if(this.reportData){
      this.formCol.forEach(element => {
          this.formName = element.id
      });
    }
    this.reportForm = new FormGroup({
      "this.formName" : new FormControl('', Validators.required)
    })

    
    // this.reportForm.controls['date'].hasError('matDatepickerMin')
    // this.reportForm.controls['date'].hasError('matDatepickerMax')
  }
  captureData(e: any) {
    this.captureParent = e.text
  }

  
  myFilter = (d: Date | null): boolean =>{
    const day = (d || new Date()).getDay();
    return day !== 0
  }

  loadReport() {
    this.formSubmitted = {
      'this.formName': this.captureParent
    }

    //let getReport = []
    alert(JSON.stringify(this.formSubmitted))
    // console.log(getReport);
    this.showReport = false;
  }

  onSubmit(){
    // alert(JSON.stringify(this.reportForm.value));
    alert('hi');
  }
}

and here is the respective html

<h2>{{reportScreenTitle}}</h2>
<div class="card" [formGroup]="reportForm" (ngSubmit)="reportForm.valid && onSubmit()">
    <div class="card-header mt-2">
        <div class="grid" *ngIf="reportData">
            <div class="row" *ngIf="reportData.row">
                <div class="col col-{{list.size}}" *ngFor="let list of reportData.row.col">
                    <div [ngSwitch]="list.type">
                        <!-- <input *ngSwitchCase="'textbox'"  [formControlName]="list.id" [id]="list.id" [type]="list.type"> -->
                        <mat-form-field appearance="legacy" *ngSwitchCase="'date'">
                            <mat-label>{{list.label}}</mat-label>
                            <input matInput [matDatepicker]="picker" [id]="list.id" [formControlName]="list.id">
                            <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                            <mat-datepicker #picker></mat-datepicker>
                        </mat-form-field>
                        <div *ngSwitchCase="'dropdown'">
                            <app-dynamic-dropdown (valueChange)="captureData($event)" id="{{list.id}}" name="{{list.id}}" ddCd="{{list.ddCd}}" displayLabel="{{list.label}}" isMandatory="true">
                            </app-dynamic-dropdown>
                        </div>

                    </div>
                </div>
                <div class="col">
                    <button class="btn btn-warning" (click)=loadReport()>Submit</button>
                </div>
            </div>
        </div>
    </div>
    <div class="card-body">
        <iframe id="dynamic_report_iframe" *ngIf="showReport" width="100%" height="500px" ></iframe>
    </div>
</div>

Any help or suggestion will be appreciated!

Answer 1

I suggest you use angular FormBuilder to build out the form group of the reactive form. It helps arrange the format of the result of the submitted form value. FormBuilder arrangement also makes it easy for adding Validations to FormControls.

https://angular.io/guide/reactive-forms#using-the-formbuilder-service-to-generate-controls

This is Angular official demo -> https://stackblitz.com/angular/oyyrkpkkjldn?file=src/app/profile-editor/profile-editor.component.ts