Javascript 如何在保存时将动态设置为查看模式

我使用的是角度动态表单，填写表单后，我想将表单设置为视图模式（只读）

html:

动态表单组件.ts

import {
  Component,
  EventEmitter,
  Input,
  OnChanges,
  OnInit,
  Output
} from "@angular/core";
import {
  FormGroup,
  FormBuilder,
  Validators,
  FormControl
} from "@angular/forms";
import { FieldConfig, Validator } from "../../field.interface";

@Component({
  exportAs: "dynamicForm",
  selector: "dynamic-form",
  template: `
  <form class="dynamic-form" [formGroup]="form" (submit)="onSubmit($event)">
  <ng-container *ngFor="let field of fields;" dynamicField [field]="field" [group]="form">
  </ng-container>
  <button type="submit"  class="btn btn-primary">Save</button>
  </form>
  `,
  styles: []
})
export class DynamicFormComponent implements OnInit {
  @Input() fields: FieldConfig[] = [];

  @Output() submit: EventEmitter<any> = new EventEmitter<any>();

  form: FormGroup;

  get value() {
    return this.form.value;
  }
  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.form = this.createControl();
  }

  onSubmit(event: Event) {
    event.preventDefault();
    event.stopPropagation();
    if (this.form.valid) {
      this.submit.emit(this.form.value);
    } else {
      this.validateAllFormFields(this.form);
    }
  }
}

导入{
组成部分，
事件发射器，
输入，
一旦改变，
奥尼特，
输出
}从“@角度/核心”；
进口{
FormGroup，
造模工，
验证器，
窗体控件
}从“@angular/forms”；
从“./../field.interface”导入{FieldConfig，Validator}”；
@组成部分({
exportAs:“dynamicForm”，
选择器：“动态表单”，
模板：`
拯救
`,
样式：[]
})
导出类DynamicFormComponent在NIT上实现{
@输入（）字段：FieldConfig[]=[]；
@Output（）提交：EventEmitter=neweventemitter（）；
表格：表格组；
获取值（）{
返回此.form.value；
}
构造函数（私有fb:FormBuilder）{}
恩戈尼尼特（）{
this.form=this.createControl（）；
}
onSubmit（事件：事件）{
event.preventDefault（）；
event.stopPropagation（）；
if（this.form.valid）{
this.submit.emit（this.form.value）；
}否则{
this.validateAllFormFields（this.form）；
}
}
}

---

我想到的一种方法是添加隐藏元素，它可以通过单击按钮进行保存，但有更好的方法吗？我不确定。

为什么不禁用表单呢？再加上@AmitB的答案，如果您将disabled=true，您可以禁用表单，这样他们就无法更改输入中的值

@ViewChild(DynamicFormComponent) form: DynamicFormComponent;

 personal: FieldConfig[] = [
    {
      type: 'radiobutton',
      label: 'status',
      name: 'status',
      options: ['xxx', 'yyy', 'zzz'],
      value: 'xxx'
    },
    {
      type: 'select',
      label: 'Height',
      name: 'height',
      value: '',
      options: ['4.7', '4.8', '4.9', '5ft', '5.1', '5.2', '5.3', '5.4', '5.5', '5.6', '5.7', '5.8', '5.9', '6ft']
    },
    {
      type: 'input',
      label: 'Any',
      name: 'any'
    }
  ];

import {
  Component,
  EventEmitter,
  Input,
  OnChanges,
  OnInit,
  Output
} from "@angular/core";
import {
  FormGroup,
  FormBuilder,
  Validators,
  FormControl
} from "@angular/forms";
import { FieldConfig, Validator } from "../../field.interface";

@Component({
  exportAs: "dynamicForm",
  selector: "dynamic-form",
  template: `
  <form class="dynamic-form" [formGroup]="form" (submit)="onSubmit($event)">
  <ng-container *ngFor="let field of fields;" dynamicField [field]="field" [group]="form">
  </ng-container>
  <button type="submit"  class="btn btn-primary">Save</button>
  </form>
  `,
  styles: []
})
export class DynamicFormComponent implements OnInit {
  @Input() fields: FieldConfig[] = [];

  @Output() submit: EventEmitter<any> = new EventEmitter<any>();

  form: FormGroup;

  get value() {
    return this.form.value;
  }
  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.form = this.createControl();
  }

  onSubmit(event: Event) {
    event.preventDefault();
    event.stopPropagation();
    if (this.form.valid) {
      this.submit.emit(this.form.value);
    } else {
      this.validateAllFormFields(this.form);
    }
  }
}