Angular 如何动态设置角度形状数据

我有一个角形组在下面。我想做的很简单，初始化表单，如果没有数据进入

Input（）data

属性，那么将表单值设置为emtpy string

'

以供用户输入。但是，如果有表单数据通过

data

属性进入，那么我想初始化表单，但要从data from input属性预先填充表单。我使用的是

setValue

方法，但它看起来不太优雅。看起来我重复了很多初始化代码。有更好的办法吗

@Component({...})
export class SignupFormComponent implements OnInit {
  Input(): data;
  user: FormGroup;
  constructor(private fb: FormBuilder) { }
  ngOnInit() {
    this.user = this.fb.group({
      name: ['', [Validators.required, Validators.minLength(2)]],
      email: ['', Validators.required]
    });
  }
  if(this.data) {
    this.user.setValue({
      name: this.data.name,
      email: this.data.email
    })
  }
}

---

使此操作更简单：

@Component({...})
export class SignupFormComponent implements OnInit {
  Input(): data;
  user: FormGroup;
  constructor(private fb: FormBuilder) { }
  ngOnInit() {
    this.user = this.fb.group({
      name: ['', [Validators.required, Validators.minLength(2)]],
      email: ['', Validators.required]
    });
  }
  if(this.data) {
    this.user.setValue(this.data) //no need set values separately
  }
}

---

结帐演示在这里进入此

您基本上只需要直接设置数据来控制，这是第一次初始化

@Input() data;
form: FormGroup;

constructor(private fb: FormBuilder) { }

ngOnInit() {
   this.form = this.fb.group ({
     nameCtr: [{value :this.data?.dataName || '', disabled: false}]
})
 

---

如果设置了数据属性，则它将从属性中设置默认数据，否则它将默认值分配给空字符串。

您还可以使用get and set方法更新子组件窗体的值修补程序。