目前我已經嘗試了下面的代碼，但我還沒有使用額外的資料。
創建房間.component.ts
import { Component, Inject, OnInit } from '@angular/core';
import { AbstractControl, FormBuilder, FormControl, FormGroup, ValidationErrors, ValidatorFn, Validators } from '@angular/forms';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { DialogData } from '../game.component';
@Component({
selector: 'app-create-room',
templateUrl: './create-room.component.html',
styleUrls: ['./create-room.component.scss']
})
export class CreateRoomComponent implements OnInit {
form!: FormGroup;
constructor(@Inject(MAT_DIALOG_DATA) public data: DialogData, private _formBuilder: FormBuilder, private dialogRef: MatDialogRef<CreateRoomComponent>) { }
ngOnInit(): void {
this.form = this._formBuilder.group({
roomInput: new FormControl("", [Validators.required]),
}, {validator: roomValidator});
}
...
}
export const roomValidator: ValidatorFn = (formGroup: AbstractControl ): ValidationErrors | null => {
/* Check if the room name already exists */
var roomName: string = formGroup.get('roomInput')?.value;
// use data from MAT_DIALOG_DATA INJECT here
if (true) {
return { nameWrong: true };
}
return null;
}
如何使用 Dialog 在自定義 ValidatorFn 中接收到的資料。
我應該通過this.data作為引數嗎？
uj5u.com熱心網友回復：
將您的驗證器定義更改為一個函式，該函式接受您需要的任何引數，并回傳ValidatorFn：
export const roomValidator = (data: DialogData): ValidatorFn => {
return (formGroup: AbstractControl ): ValidationErrors | null => {
/* Check if the room name already exists */
var roomName: string = formGroup.get('roomInput')?.value;
// use data param
if (true) {
return { nameWrong: true };
}
return null;
}
}
然后像這樣使用它：
ngOnInit(): void {
this.form = this._formBuilder.group({
roomInput: new FormControl("", [Validators.required]),
}, {validator: roomValidator(this.data)});
}
uj5u.com熱心網友回復：
您有多種選擇：
- 將 傳遞
data給驗證器作為引數 - 添加 NG_VALUE_ACCESSOR 并實作 ControlValueAccessor NG_VALUE_ACCESSOR以創建自定義表單組驗證
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/452441.html