Angular 角度反应形式验证

我是angular的新手，我正在尝试使用动态json构建表单。我已经建立了一个表单，我在验证表单时遇到了一些问题。我附上了json和代码供参考，任何帮助都将是可观的。提前谢谢

json文件

  { "form" : [
{
    "key": "role_name",
    "label": "Role Name",
    "type": "text",
    "value": "",
    "required": true,
    "order": 1,
    "validationMessage":"Role Name is required"
},
{
    "key": "brave",
    "label": "Bravery Rating",
    "type": "dropdown",
    "options": [
      {"key": "solid",  "value": "Solid"},
      {"key": "great",  "value": "Great"},
      {"key": "good",   "value": "Good"},
      {"key": "unproven", "value": "Unproven"}
    ],
   "required": true,
    "order": 5,
    "validationMessage":"Bravery Rating is required"
},
{
    "key": "comments",
    "label": "comments",
    "type": "textarea",
    "value": "",
    "required": false,
    "order": 6,
    "validationMessage":null
},
{
    "key": "last_name",
    "label": "Last Name",
    "type": "text",
    "value": "",
    "required": false,
    "order": 2,
    "validationMessage":null
},
{
    "key": "gender",
    "label": "Gender",
    "type": "radio",
    "value": "",
    "options": [
      {"key": "male",  "value": "Male"},
      {"key": "female",  "value": "Female"}
     ],
    "required": true,
    "order": 3,
    "validationMessage":"Gender is required"
},
{
    "key": "dateOfBirth",
    "label": "Date of birth",
    "type": "calender",
    "value": "",
    "required": true,
    "order": 4,
    "validationMessage":"Date of birth is required"
}
]}

打字脚本文件

import { Component } from '@angular/core';
import { FormGroup,FormControl } from '@angular/forms';
import { form } from '../assets/form.json';
import { Validators } from '@angular/forms'

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })

export class AppComponent {
title = 'my-app';
formjson = form
userDetails:object;


click():void{
  console.log(typeof(form));
  console.log(this.userDetails['value']);
}

ngOnInit(){
  this.formjson.sort((a,b) => 
    a.order - b.order
  )
  this.userDetails = new FormGroup({
    role_name : new FormControl(this.userDetails['name'],[Validators.required]),
    brave : new FormControl(''),
    comments : new FormControl(''),
    last_name : new FormControl(''),
    gender : new FormControl(''),
    dateOfBirth : new FormControl('')
  });
}

}

html文件

<form [formGroup]="userDetails">
      <div *ngFor="let elements of formjson" class="container">
      <div [ngSwitch]="elements.type">
        <div class="formgroup" *ngSwitchCase="'text'">
         <label>
           {{elements.label}}
         </label>
           <input type="text" class="form-control" id={{elements.key}} name={{elements.key}} formControlName={{elements.key}} required={{elements.required}}/>
      <div *ngIf="role_name.invalid && (role_name.dirty || role_name.touched)" class="alert alert-danger">

      <div *ngIf="role_name.errors.required">
        Name is required.
      </div>

    </div>
    </div>
    <div class="formgroup" *ngSwitchCase="'dropdown'">
      <label>
        {{elements.label}}
      </label>
      <select class="form-control" required={{elements.required}}>
        <option *ngFor="let values of elements.options">{{values.value}}</option>
      </select>
    </div>
    <div class="formgroup" *ngSwitchCase="'textarea'">
      <label>
        {{elements.label}}
      </label>
      <textarea class="form-control" formControlName={{elements.key}} required={{elements.required}}></textarea>
    </div>
    <div *ngSwitchCase="'radio'">
      <div>
        {{elements.label}}
      </div>
      <span *ngFor="let values of elements.options">
        <label>{{values.value}}</label>
        <input type="radio" name="gender" required={{elements.required}} value={{values.value}}/>
      </span>
    </div>
    <div class="formgroup" *ngSwitchCase="'calender'">
      <label>
        {{elements.label}}
      </label>
      <input type="date" class="form-control" formControlName={{elements.key}} required={{elements.required}}/>
    </div>
    <div *ngSwitchDefault>textdefauklt</div>
   </div>
  </div>
   <p (click) = "click()">onclcik</p>
       </form>

{{elements.label}
名称是必需的。
{{elements.label}
{{values.value}}
{{elements.label}
{{elements.label}
{{values.value}}
{{elements.label}
textdefauklt
onlcik上的

---

请帮助我确定这是正确的实现方法还是其他好方法。

您在HTML文件的许多地方使用了

role\u name

变量，在typescript文件的任何地方都没有定义该变量

据我所知，您正试图访问

role\u name

表单控件，因此可以在typescript文件中设置这样的getter，它将返回

role\u name

表单控件

export class AppComponent {
   title = 'my-app';
   formjson = form
   userDetails:object;

    /** Define your FormGroup here, You have given the same name for, FormGroup and 
        UserDetails variable, which is not correct
     */
    userDetailsForm: FormGroup;

   /** define the getter here, before the constructor gets called */
   get role_name() {
       return this.userDetailsForm.get('role_name');
   }
}

注意：将HTML文件中的

userDetails

更改为

userDetailsForm