问题描述
我下面有一个Angular表单组。我想做的很简单，初始化表单，如果没有数据进入''属性，然后将表单值设置为emtpy字符串data，以备用户输入。但是，如果有{em> 表单数据是通过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
})
}
}
方法，但是它看起来并不优雅。好像我在重复很多初始化代码。有更好的方法吗？
{{1}}解决方法
Angular使此操作更简单：
@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
}
}
结帐演示在这里进入此Stackblitz Link
对于第一次初始化，您基本上只需要直接设置数据即可进行控制。
@Input() data;
form: FormGroup;
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.form = this.fb.group ({
nameCtr: [{value :this.data?.dataName || '',disabled: false}]
})
如果设置了data属性，则会从属性中设置默认数据，否则会将default分配给空字符串。