Angular Ionic-仅当某个字段是某个值时才验证窗体

Question

我确信这很容易做到，但我在任何地方都找不到解决方案。

我有一个叫议程的formGroup。在启用提交之前，所有字段都是必需的且有效。我还希望最后一个字段只有在它等于用户输入的某个数字(由solution定义(时才有效。我简化了下面的代码：

<form (ngSubmit)="submitForm()" [formGroup]="agenda" class="bodytext">
<ion-input type="text" name="email" formControlName="email" required></ion-input>
<ion-input type="text" name="userSolution" formControlName="userSolution" required></ion-input>
<ion-button type="submit" expand="block" [disabled]="agenda.invalid">Submit</ion-button>
</form>

然后ts文件中有我的构造函数：

constructor( http: HttpClient, private formBuilder: FormBuilder) {
this.http = http;
this.agenda = this.formBuilder.group({
email: [''],
userSolution: [''],
});
}

Answer 1

我在stackblitz上创建了一个工作示例，其中假设条件为true时数字为20。您也可以在初始化表单时使用所需的验证器。

我使用了一个自定义验证器，如果条件不匹配，它会将错误名称作为关键字返回，并将布尔值true作为值{errorName: true}返回，并且该错误名称可以用于验证错误消息。

export class AppComponent implements OnInit {
agenda: FormGroup;
solution = 20;
constructor(private formBuilder: FormBuilder) {}
ngOnInit() {
this.initForm();
}
initForm() {
this.agenda = this.formBuilder.group({
email: ["", Validators.required],
userSolution: ["", [Validators.required, this.myValidator(this.solution)]]
});
}
myValidator(num: number): ValidatorFn {
return (control: AbstractControl): { [key: string]: boolean } | null => {
if (
control.value !== undefined &&
(isNaN(control.value) || control.value != num)
) {
return { notEqual: true };
}
return null;
};
}
}

表单-

<form [formGroup]="agenda" class="bodytext">
<input type="text" name="email" formControlName="email">
<input type="text" name="userSolution" formControlName="userSolution">
<button type="submit" expand="block" [disabled]="agenda.invalid">Submit</button>
</form>

演示链接-stackBlitz

Answer 2

为了澄清这是Angular特有的，而不是Ionic特有的。

您需要组成一个验证器。最简单的方法是定义一个函数并将其传入

在不了解验证需求的具体情况的情况下，下面的伪代码应该可以帮助您达到目的。

注意：validateUserSolution的签名可能会根据您的需求而更改。

constructor( http: HttpClient, private formBuilder: FormBuilder) 
{
this.http = http;
this.agenda = this.formBuilder.group({
email: [''],
userSolution: ['', Validators.compose(validateUserSolution(this.someValue, this.someOtherValue))],
});
}
validateUserSolution(myInput1: string, myInput2: string): boolean {
// some logic
}