angular ＜pre＞＜/pre＞解析

最新推荐文章于 2024-01-26 16:33:49 发布

云墨cloudMel

最新推荐文章于 2024-01-26 16:33:49 发布

阅读量443

点赞数

分类专栏： Angular

原文链接：https://ng-run.com/edit/qDLp6mILN79SXYwsHOUX?open=app%2Fapp.component.html

版权

Angular 专栏收录该内容

14 篇文章

订阅专栏

这篇博客展示了如何在Angular应用中创建一个表单，其中包括一个选择字段，该字段根据用户选择的状态动态显示或隐藏额外输入字段。此外，文章还涉及到表单验证和提交，以及如何在页面上实时展示表单的有效性和当前值。通过ngIf指令和ngSubmit事件处理，实现了动态UI和数据交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<h2 class="title">Hello {{name}}</h2>

<style>
	div {
		margin: 20px 10px;
	}
</style>
<h1>Hello</h1>
<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
	<div>
		<select formControlName="status" (change)="onStatusChange()">
            <option value="1">Active</option>
            <option value="2">Warmup</option>
            <option value="0">InActive</option>
        </select>
	</div>
	<ng-container *ngIf="myForm.get('status').value == 1 || myForm.get('status').value == 2">
		<div>
			<input formControlName="hobbies" placeholder="hobbies">
        </div>
			<div>
				<input formControlName="profile" placeholder="profile">
        </div>
	</ng-container>
	<div>
		<input formControlName="test" placeholder="test">
    </div>
		<div>
			<button type="submit">Submit</button>
		</div>
		<!-- Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'
    because of below pre tag  -->
		<pre>{{myForm.valid}}</pre>
    <pre>{{myForm?.value | json}}</pre>
</form>

https://ng-run.com/edit/qDLp6mILN79SXYwsHOUX?open=app%2Fapp.component.html