这里的问题应该很简单，但我无法初始化反应式表单的输入字段并使该控件有效。
假设我有以下代码：
@Component({
selector: 'app-profile-editor',
templateUrl: './profile-editor.component.html',
styleUrls: ['./profile-editor.component.css']
})
export class ProfileEditorComponent {
profileForm = this.fb.group({
firstName: string,
lastName: string,
address: this.fb.group({
fName: ['initial value', [Validators.required]],
city: ['', [Validators.required]],
state: [''],
zip: ['']
}),
});
constructor(private fb: FormBuilder) { }
}
在模板中，我让我们说：
<input [(ngModel)]="firstName" formControlName="fName" />
问题是以这种方式设置默认值不起作用：
fName: ['initial value', [Validators.required]],
第二种方式不起作用：
fName: new FormControl('initial value', [Validators.required])
第三种方法是在模板中这样做也不起作用：
<div>
<input [(ngModel)]="firstName" formControlName="fName" [value]="'default value'"/>
</div>
第四种方法是：
this.address.controls['fName'].setvalue('default value');
this.address.controls['fName'].updateValueAndValidity();
因此，当我一次尝试所有这些组合或其中一种时，并进入调试器并验证以下值是什么：this.address.controls['fName'].value，它给了我一个空值 --> ''
因此，即使在我的表单中最初填充了该字段并且我必须提供其他字段，然后由于此字段，我的表单无效，然后它不会将我的保存按钮显示为已启用。
有人可以解释为什么会有这种行为或解释正确的方法吗？
注意：我只是在这里给出一个小的代码示例作为提示，因为我的真实代码是一个更大且专有的 angular 6 应用程序的一部分。
我必须清理这个例子，但这里有一个使用：<输入类型 类="表单控件" id="username" formControlName="username">
https://stackblitz.com/edit/angular-reactive-forms-jhg6ds?file=app%2Fapp.component.ts
(稍后将更新此示例。
在这种情况下，没有显示默认值，因为我认为与ngModel内容有点并发，所以我想在ngModel的内容为空时设置默认值事件(例如，创建空表单时，用户必须找到一些已经填充的字段(然后有效((
编辑版本：https://stackblitz.com/edit/angular-reactive-forms-atvaym
模板：
<form [formGroup]="SignupForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<label for="username">UserName</label>
<input type="text" class="form-control" id="username" formControlName="username">
<span class="help-block" *ngIf="!SignupForm.controls.username.valid && SignupForm['controls'].username.touched">
<span *ngIf="SignupForm['controls'].username.hasError('nameIsForbidden')">name is invalid</span>
<span *ngIf="SignupForm['controls'].username.hasError('required')">field is required</span>
</span>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" formControlName="email">
<span class="help-block" *ngIf="!SignupForm.controls.email.valid && SignupForm['controls'].email.touched">
<span *ngIf="SignupForm['controls'].email.hasError('emailIsForbidden')">name is invalid</span>
<span *ngIf="SignupForm['controls'].email.hasError('required')">field is required</span>
</span>
</div>
<div class="radio" *ngFor="let gender of genders">
<label>
<input type="radio" [value]="gender" formControlName = "gender">{{gender}}
</label>
</div>
<div formArrayName="hobbies">
<h4>Hobbies</h4>
<button class="btn btn-default" type="button" (click)="onAddHobby()">Add Hobby</button>
<div class="form-group" *ngFor="let hobbyControl of SignupForm['controls'].hobbies['controls']; let i=index">
<div [formGroupName]="i">
<div [formGroup]="SignupForm['controls'].hobbies['controls'][i]">
<input type="text" class="form-control" formControlName="name">
</div>
</div>
</div>
</div>
<span class="help-block" *ngIf="!SignupForm.valid && SignupForm.touched">please enter valid data</span>
<button class="btn btn-primary" type="submit">Submit</button>
</form>
打字稿：
ngOnInit(){
this.SignupForm = this.fb.group({
username: [{value: 'default name', disabled: false}, [Validators.required, this.validateName()]],
email: [{value: 'default name', disabled: false}, [Validators.required, Validators.email, this.validateEmail()]],
gender: [{value: 'female', disabled: false}, [Validators.required]],
hobbies: this.fb.array([])
});
}
onAddHobby(){
const controls = <FormArray>this.SignupForm.controls['hobbies'];
let control = this.fb.group({
name: [{value: 'hobbi', disabled: false}]
});
controls.push(control);
}
private validateName(): ValidatorFn {
return (control: AbstractControl): {[key: string]: any} => {
for(let i of this.forbiddenUserNames){
if(i === control.value){
return {'nameIsForbidden': true};
} else {
return null;
}
}
}
}
private validateEmail(): ValidatorFn {
return (control: AbstractControl): {[key: string]: any} => {
if(control.value === 'test@test.com'){
return {'emailIsForbidden': true};
} else {
return null;
}
}
}
我建议看看这篇关于异步验证器的文章 https://alligator.io/angular/async-validators/