更改所选选项后将 ngModel 值设置为 null
set ngModel value to null after changing selected option
我有一个表格,其中包含一个 select 选项和一个 div 部分取决于 selected 选项。在 select 选项中,如果我选择 1 例如,将显示输入
component.ts
types : any[] = [
{ value : '1'},
{ value : '2'},
{ value : '3'}
];
createForm = this.fb.group({
firstInput:['',Validators.required],
secondInput:['',Validators.required],
thirdInput:['',Validators.required],
});
component.html
<select class="form-control" [value]="selected"[(ngModel)]="selectedValue">
<option *ngFor="let x of types">{{x.value}}</option>
</select>
<div *ngIf="selectedValue == '1'">
<label for="1" class="control-label">1</label>
<input id="1" class="form-control" type="text" formControlName="firstInput">
</div>
<div *ngIf="selectedValue == '2'">
<label for="2" class="control-label">2</label>
<input id="2" class="form-control" type="text" formControlName="secondInput">
</div>
<div *ngIf="selectedValue == '3'">
<label for="3" class="control-label">3</label>
<input id="3" class="form-control" type="text" formControlName="thirdInput">
</div>
所有字段都是必填项,我的问题是:当我选择“1”时没有填写“1”的输入然后我更改为第二个选择“2”并填写它,我无法提交表单,因为 fielControllName "firstInput" 尽管不可见但还是空的,所以我需要在每次更改时清除 ngModel 的 selected 值(正如我认为的那样)。
所以最初你的表格必须是这样的:
createForm = this.fb.group({
selectedValue:[null,Validators.required],
firstInput:[null],
secondInput:[null],
thirdInput:[null],
});
您的 HTML 代码:
<form [formGroup]="createForm">
<select class="form-control" formControlName="selectedValue">
<option *ngFor="let x of types" value="{{x.value}}">{{x.value}}</option>
</select>
<div *ngIf="createForm.value.selectedValue== '1'">
<label for="1" class="control-label">1</label>
<input id="1" class="form-control" type="text" formControlName="firstInput">
</div>
<div *ngIf="createForm.value.selectedValue== '2'">
<label for="2" class="control-label">2</label>
<input id="2" class="form-control" type="text" formControlName="secondInput">
</div>
<div *ngIf="createForm.value.selectedValue== '3'">
<label for="3" class="control-label">3</label>
<input id="3" class="form-control" type="text" formControlName="thirdInput">
</div>
</form>
那你必须有on change函数:
OnChange() {
this.createForm.get('selectedValue').valueChanges.subscribe(
val => {
if (val==1) {
this.createForm.get('firstInput').setValidators([Validators.required]);
this.createForm.controls['firstInput'].updateValueAndValidity();
this.createForm.get('secondInput').setValidators([]);
this.createForm.controls['secondInput'].updateValueAndValidity();
this.createForm.get('thirdInput').setValidators([]);
this.createForm.controls['thirdInput'].updateValueAndValidity();
}
else if (val==2) {
this.createForm.get('firstInput').setValidators([]);
this.createForm.controls['firstInput'].updateValueAndValidity();
this.createForm.get('secondInput').setValidators([Validators.required]);
this.createForm.controls['secondInput'].updateValueAndValidity();
this.createForm.get('thirdInput').setValidators([]);
this.createForm.controls['thirdInput'].updateValueAndValidity();
}
else if (val==3) {
this.createForm.get('firstInput').setValidators([]);
this.createForm.controls['firstInput'].updateValueAndValidity();
this.createForm.get('secondInput').setValidators([]);
this.createForm.controls['secondInput'].updateValueAndValidity();
this.createForm.get('thirdInput').setValidators([Validators.required]);
this.createForm.controls['thirdInput'].updateValueAndValidity();
}
}
)
}
如果你想让值变为空,你可以使用:
this.createForm.patchValue({
firstInput:null,
secondInput:null,
thirdInput:null,
})
我有一个表格,其中包含一个 select 选项和一个 div 部分取决于 selected 选项。在 select 选项中,如果我选择 1 例如,将显示输入
component.ts
types : any[] = [
{ value : '1'},
{ value : '2'},
{ value : '3'}
];
createForm = this.fb.group({
firstInput:['',Validators.required],
secondInput:['',Validators.required],
thirdInput:['',Validators.required],
});
component.html
<select class="form-control" [value]="selected"[(ngModel)]="selectedValue">
<option *ngFor="let x of types">{{x.value}}</option>
</select>
<div *ngIf="selectedValue == '1'">
<label for="1" class="control-label">1</label>
<input id="1" class="form-control" type="text" formControlName="firstInput">
</div>
<div *ngIf="selectedValue == '2'">
<label for="2" class="control-label">2</label>
<input id="2" class="form-control" type="text" formControlName="secondInput">
</div>
<div *ngIf="selectedValue == '3'">
<label for="3" class="control-label">3</label>
<input id="3" class="form-control" type="text" formControlName="thirdInput">
</div>
所有字段都是必填项,我的问题是:当我选择“1”时没有填写“1”的输入然后我更改为第二个选择“2”并填写它,我无法提交表单,因为 fielControllName "firstInput" 尽管不可见但还是空的,所以我需要在每次更改时清除 ngModel 的 selected 值(正如我认为的那样)。
所以最初你的表格必须是这样的:
createForm = this.fb.group({
selectedValue:[null,Validators.required],
firstInput:[null],
secondInput:[null],
thirdInput:[null],
});
您的 HTML 代码:
<form [formGroup]="createForm">
<select class="form-control" formControlName="selectedValue">
<option *ngFor="let x of types" value="{{x.value}}">{{x.value}}</option>
</select>
<div *ngIf="createForm.value.selectedValue== '1'">
<label for="1" class="control-label">1</label>
<input id="1" class="form-control" type="text" formControlName="firstInput">
</div>
<div *ngIf="createForm.value.selectedValue== '2'">
<label for="2" class="control-label">2</label>
<input id="2" class="form-control" type="text" formControlName="secondInput">
</div>
<div *ngIf="createForm.value.selectedValue== '3'">
<label for="3" class="control-label">3</label>
<input id="3" class="form-control" type="text" formControlName="thirdInput">
</div>
</form>
那你必须有on change函数:
OnChange() {
this.createForm.get('selectedValue').valueChanges.subscribe(
val => {
if (val==1) {
this.createForm.get('firstInput').setValidators([Validators.required]);
this.createForm.controls['firstInput'].updateValueAndValidity();
this.createForm.get('secondInput').setValidators([]);
this.createForm.controls['secondInput'].updateValueAndValidity();
this.createForm.get('thirdInput').setValidators([]);
this.createForm.controls['thirdInput'].updateValueAndValidity();
}
else if (val==2) {
this.createForm.get('firstInput').setValidators([]);
this.createForm.controls['firstInput'].updateValueAndValidity();
this.createForm.get('secondInput').setValidators([Validators.required]);
this.createForm.controls['secondInput'].updateValueAndValidity();
this.createForm.get('thirdInput').setValidators([]);
this.createForm.controls['thirdInput'].updateValueAndValidity();
}
else if (val==3) {
this.createForm.get('firstInput').setValidators([]);
this.createForm.controls['firstInput'].updateValueAndValidity();
this.createForm.get('secondInput').setValidators([]);
this.createForm.controls['secondInput'].updateValueAndValidity();
this.createForm.get('thirdInput').setValidators([Validators.required]);
this.createForm.controls['thirdInput'].updateValueAndValidity();
}
}
)
}
如果你想让值变为空,你可以使用:
this.createForm.patchValue({
firstInput:null,
secondInput:null,
thirdInput:null,
})