Angular 4:如何禁用带有两个条件和异步标志的按钮?
Angular 4: How to disable button with two condition and asynchronous flag?
场景
我试图通过两个条件禁用[disabled]一个按钮和select一个class[ngClass]:
第 1 条:需要输入文字。
第二:异步标志要求为真。我依赖于对远程服务器的请求挑战,这是启用此按钮的触发器。
嗯,我正在使用这样的 formGroup 验证:
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 与输入一起使用,但我不确定我是否可以在这里使用它。你知道我该如何解决吗?
谢谢。
you try with ngOnChanges like this
打字稿
ngOnChanges() {
this.signIn = false;
this.form = this.fb.group({
uname: [null, Validators.compose([Validators.required])],
password: [null, Validators.compose([Validators.required])]
});
}
在html
<button [class]="put your condition here" type="submit" [disabled]="!form.valid">Login</button>
不需要这个
'button': [false, Validators.requiredTrue]
问题已解决
最后,我解决了这个不使用FormGroup的问题。由于我有一个 observable 可以通知挑战是否到达,所以我使用了两个不同的控件。其中一个是已知控件 "form.valid",另一个是 class 的属性,它会在可观察对象的响应到达时更新。然后我将这两个属性设置为条件。此处代码:
<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>
场景
我试图通过两个条件禁用[disabled]一个按钮和select一个class[ngClass]:
第 1 条:需要输入文字。
第二:异步标志要求为真。我依赖于对远程服务器的请求挑战,这是启用此按钮的触发器。
嗯,我正在使用这样的 formGroup 验证:
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 与输入一起使用,但我不确定我是否可以在这里使用它。你知道我该如何解决吗?
谢谢。
you try with ngOnChanges like this
打字稿
ngOnChanges() {
this.signIn = false;
this.form = this.fb.group({
uname: [null, Validators.compose([Validators.required])],
password: [null, Validators.compose([Validators.required])]
});
}
在html
<button [class]="put your condition here" type="submit" [disabled]="!form.valid">Login</button>
不需要这个
'button': [false, Validators.requiredTrue]
问题已解决
最后,我解决了这个不使用FormGroup的问题。由于我有一个 observable 可以通知挑战是否到达,所以我使用了两个不同的控件。其中一个是已知控件 "form.valid",另一个是 class 的属性,它会在可观察对象的响应到达时更新。然后我将这两个属性设置为条件。此处代码:
<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>