Question

我现在编写一个简单的登录信息。你可以在这里找到一些代码：https://stackblitz.com/edit/angular-qf7pju
现在我几乎没有问题：
1.当我立即按下登录提交时，即使必填字段为空，我也会获得成功。
2.我希望Field B选择输入将被禁用，直到Field A不为空，但我无法达到目的。
3.我在＆＃39;代码＆＃39;中使用了(keyup)个事件。文本输入操作用户输入但验证可能尝试在我完成操作文本之前通过我的模式验证输入。

最终这些很多小事情给我带来了很多麻烦，我可以使用一些帮助。
thx

Answer 1

立即登录提交？ ~~你为什么不喜欢：~~

~~<button type="submit" [disabled]="!(loginForm?.valid)" mat-button>Login</button>~~

这是因为您已为表单指定了默认值您定义的控件：例如，当您有类似的内容时：
```
this.loginForm.addControl('fcs', new FormControl(this.fcs, Validators.required));
```
这里'this.fcs'是默认值，即使控件有效，你宁愿想要像：
```
 this.loginForm.addControl('fcs', new FormControl('', Validators.required));
```
我在stackblitz编辑时遇到了一些问题，这里有您可以尝试更改：

我使用过：FormBuilder（这是可选的，你可以创建表单已经创建的模型，只是不提供默认的有效值）
```
fieldBDisabled:boolean = true;
 ...
constructor(private _fb: FormBuilder) { } 
... 


createForm() {
this.loginForm = this._fb.group({
  'fas': ['', Validators.required],
  'fbs': [{value: '', disabled: this.fieldBDisabled}, Validators.required],
  'fcs': ['', Validators.required],
  'code': ['', Validators.compose([Validators.required, Validators.pattern('[0-9]{5}')])],
});
```
}

现在点击“登录”，它应该打印Failed

我想你想说，Field B已经停用了（请纠正我，如果这不是你想要的），直到我们填写A场，在这种情况下：

<mat-select [disabled]=!"(loginForm?.controls['fbs']?.value)" placeholder="FieldB" formControlName="fbs" []> </mat-select>

<击>
我们不使用角度[disabled]，这将混合template driven forms with reactive forms。相反，我们将FieldB初始化为禁用当我们看到fieldA的值发生变化时启用它（参见onblur事件）

<mat-select placeholder="Field A" name="one" (blur)="isFieldAValid()" formControlName="fas"> <mat-option *ngFor="let fa of fas" value="{{fa}}">{{fa}}</mat-option> </mat-select> isFieldAValid() { if (this.loginForm.get('fas').valid) { this.loginForm.get('fbs').enable(); } }

如果要验证第三个字段，那么为什么不添加表单控件本身的验证器而不是(keyup) 事件？ <击>
<击>
this.loginForm.addControl('code', new FormControl(this.code, Validators.compose([ Validators.pattern('[0-9]{5}'), this.codeInput.bind(this)]))) </strike>

<击>

如果您正在验证，那么这应该仍然有效，如果需要该字段，则不要给出初始默认值，

'code': ['', Validators.compose([Validators.required, Validators.pattern('[0-9]{5}'), this.codeInput.bind(this)]])],

然后使你的函数codeInput()类似于：

codeInput(control: FormControl) {...}

Angular FromControl禁用/启用条件和验证器

1 个答案: