Angular - 如何在使用自定义组件时检查 ngForm 是否有效

Question

我创建了一个自定义组件InputTextComponent：

    @Component({
        selector: "app-input-text",
        templateUrl: "./input-text.component.html",
        styleUrl: "./input-text.component.scss",
        standalone: true,
        imports: [CommonModule, FormsModule],
    })
    export class InputTextComponent {
        @Input() item: string | undefined;
        @Input() id: string | undefined;
        @Output() itemChange = new EventEmitter<string>();

        onInputChange(value: string) {
            this.item = value;
            this.itemChange.emit(value);
        } 
    }

input-text.component.html 模板如下所示：

<input
    [id]="id"
    type="text"
    class="form-control"
    [(ngModel)]="item"
    (ngModelChange)="onInputChange($event)"
    required
/>

使用自定义组件的父组件TestFormComponent：

export class TestFormComponent {
...
    @ViewChild("f", { static: true }) ngForm: NgForm | undefined;
...
    onSubmit() {
        console.log("valid", this.ngForm.valid);
    }
...
}

测试表格模板：

<form (ngSubmit)="onSubmit()" #f="ngForm">
    <app-input-text [(item)]="name" id="test_name"></app-input-text>
</form>

问题： 该表格始终有效。如果我将自定义组件的内容直接放入父组件中，则一切正常，并且在我在文本字段中输入内容之前，表单无效。我怎样才能改变它，这样我就可以使用我的自定义组件并仍然进行表单验证

我尝试在网上寻找答案，但到目前为止还没有结果。

Answer 1

 <app-input-text id="test_name" name="name" [(ngModel)]="name" required></app-input-text>

export class TestFormComponent {
...
    name?:string;
    @ViewChild("f", { static: true }) ngForm: NgForm | undefined;
...
    onSubmit() {
        console.log("valid", this.ngForm.valid);
    }
...
}