【发布时间】：2021-05-28 22:36:19
【问题描述】：
我正在尝试听是否有任何字段更改或不使用角度的 valueChanges。下面是我的代码
this.advSearchForm = this.formBuilder.group({
noCountry: this.formBuilder.group({
licenseOwnerName: [null, [Validators.maxLength(256)]],
locationAddressLine1: [null, [Validators.maxLength(256)]],
DBAName: [null, [Validators.maxLength(255)]],
locationCity: [null, [Validators.maxLength(60)]],
licenseNumber: [null, [Validators.maxLength(256)]],
issuingAuthorityName: [null, [Validators.maxLength(256)]],
}),
locationState: [null],
locationCountry: [null]
});
const lNumber = <FormControl>this.advSearchForm.get('noCountry.licenseNumber');
const lCountry = <FormControl>this.advSearchForm.get('locationCountry');
const lState = <FormControl>this.advSearchForm.get('locationState');
const lAddress = <FormControl>this.advSearchForm.get('noCountry.locationAddressLine1');
const lOwner = <FormControl>this.advSearchForm.get('noCountry.licenseOwnerName');
const lCity = <FormControl>this.advSearchForm.get('noCountry.locationCity');
const dName = <FormControl>this.advSearchForm.get('noCountry.DBAName');
const iAuthority = <FormControl>this.advSearchForm.get('noCountry.issuingAuthorityName');
this.subscription = this.advSearchForm.get('noCountry').valueChanges.subscribe(selectedValue => {
if (lCountry.value == 287307 && lAddress.value == null && lOwner.value == null && lCity.value == null && dName.value == null && iAuthority.value == null && lNumber.value == null ) {
lState.setValidators([Validators.required ]);
console.log(selectedValue);
}
else {
lState.setValidators(null);
}
lState.updateValueAndValidity();
});
我正在尝试用它来听
this.advSearchForm.get('noCountry').valueChanges.subscribe(selectedValue => { ....
HTML
<form (ngSubmit)="onSubmit()" [formGroup]="advSearchForm" class="search_main_form" >
<div class="form-row">
<div class="col">
<div class="form-group">
<label for="email">License Owner: </label>
<div class="controls">
<input type="text" id="licenseOwnerName" class="form-control" formControlName="licenseOwnerName" maxlength="256">
</div>
</div>
</div>
<div class="col">
<div class="form-group">
<label for="email">Location Address Line 1: </label>
<div class="controls">
<input type="text" id="locationAddressLine1" class="form-control" formControlName="locationAddressLine1" maxlength="256">
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="col">
<div class="form-group">
<label for="dba_name">DBA Name: </label>
<div class="controls">
<input type="text" id="DBAName" class="form-control" formControlName="DBAName" maxlength="255">
</div>
</div>
</div>
<div class="col">
<div class="form-group">
<label for="location_city">Location City: </label>
<div class="controls">
<input type="text" id="locationCity" class="form-control" formControlName="locationCity" maxlength="60">
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="col">
<div class="form-group">
<label for="license_number">License Number: </label>
<div class="controls">
<input type="text" id="licenseNumber" class="form-control" formControlName="licenseNumber" maxlength="256">
</div>
</div>
</div>
<div class="col">
<div class="form-group">
<label for="location_state">Location State: </label>
<div class="controls">
<select id="locationState" formControlName="locationState" class="form-control" (change)="onChangeState($event.target.value);getStateText($event)">
<option value="">Please select</option>
<option *ngFor="let state of statesList" [value]="state.id">{{state.name}}</option>
</select>
<span class="errorMsg">{{geoError}}</span>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="col">
<div class="form-group">
<label for="issuing_authority">Issuing Authority Name: </label>
<div class="controls">
<input type="text" id="issuingAuthorityName" class="form-control" formControlName="issuingAuthorityName" maxlength="256">
</div>
</div>
</div>
<div class="col">
<div class="form-group">
<label for="location_country">Location Country: </label>
<div class="controls">
<select id="locationCountry" formControlName="locationCountry" class="form-control" (change)="onChangeCountry($event.target.value);getCountryText($event)">
<option *ngFor ="let country of countriesList" [value]="country.id">{{country.name ? country.name : country.isoName}} </option>
</select>
<span class="errorMsg">{{geoError}}</span>
</div>
</div>
</div>
</div>
<div class="form-group search_btn">
<!-- <button [disabled]="!licenseOwner && !locationCity && !locationAddress && !dbaName && !licenseNumber && !stateSelected && !issuingAuthority" class="btn btn-primary" type="submit"> -->
<button [disabled]="advSearchForm.invalid" class="btn btn-primary" type="submit">
Search
</button>
</div>
</form>
但上述方法不起作用。我在这里做错了什么？请建议。谢谢
【问题讨论】：
-
这似乎是正确的。你能给我们发送更多代码吗？
-
用更多必需的代码更新了问题
-
当您更改表单控件的值时，您的控制台中是否出现任何错误？
-
是的，出现 ERROR 错误：找不到名称为“DBAName”的控件，用于 noCountry 组下的所有控件
-
你也可以分享你的html代码吗？
标签： angular angular-reactive-forms