我想禁用所有button
的,当selectedplace
is时null
,这在对话框第一次启动时起作用,但是当我更改选项时,它一直都处于激活状态。
这不应该是我尝试过的那样:
的HTML:
<label for="place">Einheit</label>
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary" [disabled]="!selectedplace" type="button">Change</button>
</div>
<select id="place" name="place" #place="ngModel" required class="form-control" [(ngModel)]="selectedplace" (change)="onDropdownChangeplace()">
<option value=""></option>
<option *ngFor="let i of UI_places" [ngValue]="i">{{i.name}}</option>
</select>
<div class="alert alert-danger" *ngIf="place.touched && !place.valid">Bitte eine Eingeben eingeben!</div>
<div class="input-group-append">
<button class="btn btn-outline-secondary" [disabled]="!selectedplace" type="button">Add</button>
<button class="btn btn-outline-secondary" [disabled]="!selectedplace" type="button">Delete(red)</button>
</div>
</div>
TypeScript(已声明):
public selectedplace: Place;
我该怎么办 ?
你在做什么onDropdownChangeplace
。我的猜测是您根据更改的索引分配一个值。
当您不分配值时(如果为空选择),则先前的值仍绑定到ngModel。
在此处检查stackblitz。根据您的代码,它可以很好地启用和禁用。
那就是组件中的代码。我完全按照您发送的方式保留了html。
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
public UI_places = [{id:0, name: 'home'},{id:1, name: 'work'}];
public selectedplace: Place;
onDropdownChangeplace() {
}
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句