Angular 角度4:如何禁用带有两个条件和异步标志的按钮?
场景 我试图禁用[禁用]按钮,并通过两个条件选择一个类[ngClass]: 第一:需要输入文本 第二:异步标志为requiredTrue。我依赖于对远程服务器的请求质询,远程服务器是启用此按钮的触发器 我使用的formGroup验证如下:Angular 角度4:如何禁用带有两个条件和异步标志的按钮?,angular,asynchronous,angular-forms,multiple-conditions,Angular,Asynchronous,Angular Forms,Multiple Conditions,场景 我试图禁用[禁用]按钮,并通过两个条件选择一个类[ngClass]: 第一:需要输入文本 第二:异步标志为requiredTrue。我依赖于对远程服务器的请求质询,远程服务器是启用此按钮的触发器 我使用的formGroup验证如下: constructor(private fb: FormBuilder) { this.form = this.fb.group({ 'inputSMS': [null, Validators.required],
constructor(private fb: FormBuilder) {
this.form = this.fb.group({
'inputSMS': [null, Validators.required],
'button': [false, Validators.requiredTrue]
})
}
第一个条件=输入;第二个=按钮
在我的HTML中,我将此代码用于第一个条件:
<div class="col-xs-offset-1 col-xs-10">
<div [formGroup]="form">
<label class="col-xs-4 F sms-codigo-sms">SMS Code</label>
<div class="col-xs-6">
<input class="form-control sms-rect7" [(ngModel)]="inputSMS" formControlName="inputSMS" name="inputSMS" maxlength="20" type="numbers">
</div>
</div>
</div>
短信代码
这是第二个:
<div class="form-group row text-center">
<div class="col-md-12">
<div class="btn-group">
<button [ngClass]="!form.valid ? 'sms-btn-disabled' : 'sms-btn'"
type="button" style="float: left;" [disabled]="!form.valid"
formControlName="button" (click)="check()">Validate</button>
</div>
</div>
验证
问题
我正确地收到了带有主题的异步标志。我查过了。第一个条件为真。但我不知道为什么在条件为真时不启用按钮。就好像没有检测到事件的变化。我只使用带有输入的ngModel,但我不确定是否可以在这里使用它。你知道我该怎么解决吗
多谢各位
你试试这样的ngOnChanges
打字
ngOnChanges() {
this.signIn = false;
this.form = this.fb.group({
uname: [null, Validators.compose([Validators.required])],
password: [null, Validators.compose([Validators.required])]
});
}
在html中
你试试这样的ngOnChanges
打字
ngOnChanges() {
this.signIn = false;
this.form = this.fb.group({
uname: [null, Validators.compose([Validators.required])],
password: [null, Validators.compose([Validators.required])]
});
}
在html中
问题已解决 最后,我解决了这个问题,没有使用FormGroup。由于我有一个可观察的通知,如果挑战到来,我使用了两种不同的控制。其中一个是已知的控件“form.valid”,另一个是类的一个属性,当可观察对象的响应到达时,它将更新该类的属性。然后我将这两个属性设置为条件。此处代码:
<div class="btn-group">
<button [ngClass]="(!form.valid || !buttonValidate) ? 'sms-font sms-btn-disabled' : 'sms-font sms-btn'" type="button""
[disabled]="(!form.valid || !buttonValidate)" (click)="check()">Validate</button>
</div>
问题已解决
最后,我解决了这个问题,没有使用FormGroup。由于我有一个可观察的通知,如果挑战到来,我使用了两种不同的控制。其中一个是已知的控件“form.valid”,另一个是类的一个属性,当可观察对象的响应到达时,它将更新该类的属性。然后我将这两个属性设置为条件。此处代码:
<div class="btn-group">
<button [ngClass]="(!form.valid || !buttonValidate) ? 'sms-font sms-btn-disabled' : 'sms-font sms-btn'" type="button""
[disabled]="(!form.valid || !buttonValidate)" (click)="check()">Validate</button>
</div>
你能分享完整的HTML表单代码吗?我编辑了@KarthickManoharan的帖子,谢谢。你能分享完整的HTML表单代码吗?我编辑了@KarthickManoharan的帖子,谢谢。首先,谢谢你。但是这个解决方案不适用于这个场景,因为我需要一个异步标志来确保可以启用Button。这里的问题是如何使用这个标记tested ok来验证第一个条件和第二个条件的表单控件。我不知道如何将变量按钮“绑定”到formGroup Validator。为什么要将按钮添加到Validator请清楚地解释我最终解决了问题Soumya。贴在下面。谢谢你。首先,谢谢你的时间。但是这个解决方案不适用于这个场景,因为我需要一个异步标志来确保可以启用Button。这里的问题是如何使用这个标记tested ok来验证第一个条件和第二个条件的表单控件。我不知道如何将变量按钮“绑定”到formGroup Validator。为什么要将按钮添加到Validator请清楚地解释我最终解决了问题Soumya。贴在下面。谢谢。有没有办法不在模板中执行此操作?有combinelateest
。请参见是否有方法不在模板中执行此操作?有combinelateest
。看见