在进入下一页之前单击按钮时如何创建所需的错误消息？

Question

我试图在我的文本框和下拉问题上创建一条错误消息，当我单击“下一步”进入下一页时，它会显示一条错误消息，表明这些是必需的，因此我必须在进入下一页之前输入一些内容。

组件.html

<div class="container tb-10">
<form>
    <div>
        <div class="row">
            <h4>TANF - Temporary Assistance to Needy Families:</h4>
            <div class="form-group">
                <label>Please name the person (whether you or a member of your household) who receives food stamps, and city and state where they are received.</label>
                <div>
                    Person Receiving Benefits: <input type="text" class="form-control" name="tanf_beneficiary" id="tanf_beneficiary" required placeholder="Person Receiving Benefits" >
                </div>

                <div>
                    Relationship to you: <input type="text" class="form-control" name="tanf_relationship" id="tanf_relationship" required placeholder="Relationship to you" >
                </div>

                <div>
                    City: <input type="text" class="form-control" name="tanf_city" id="tanf_city" required placeholder="City" >
                </div>

                <div>
                    <label for="state" class="form-label">State:</label>
                    <select class="form-select" value="" aria-label="State"  id="state">
                        <option selected>Select State...</option>
                        <option value="1">One</option>
                        <option value="2">Two</option>
                        <option value="3">Three</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
    <footer>
        <button id="exit" class="btn btn-danger pull-left" >Exit</button>
        <button id="submitform" type="submit" class="btn btn-primary pull-right"  routerLink="/unemployed"> Next </button>
    </footer>
</form>

组件.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-tanf-benefits',
  templateUrl: './tanf-benefits.component.html',
  styleUrls: ['./tanf-benefits.component.css']
})
export class TanfBenefitsComponent {

}

Answer 1

Angular 有多种处理表单的方法。我根据您的要求分享一个简单的方法。我没有使用材质库，因为在您的示例中您使用了简单的控件。 这是我创建的代码示例

我们使用 formGroup 来处理表单提交和错误处理。如果您还有其他相关问题，请随时询问。如果有帮助请记得将其标记为答案。快乐编码:)