angular-reactive-forms 相关问题

我正在处理这个代码：登录.component.html 我正在处理这个代码：登录.component.html <div class="main"> <div class="image"> <img src="./assets/icons/login.png" alt="Login"> <p>Login in to your account</p> </div> <form [formGroup]="form" class="login" (ngSubmit)="onClick()"> <p class="error-message" style="font-size: large;" *ngIf="!isValid">Please fill the your info</p> <p>Enter your user name and password</p> <div class="userName"> <label for="userName">User name</label> <br> <input [ngClass]="{'error': emailValidation && !isValid}" type="text" id="userName" placeholder="Your user name" formControlName="email"> <p class="error-message" *ngIf="emailValidation && !isValid">please enter your user name</p> </div> <div class="pass"> <label for="pass">Password</label> <br> <input [ngClass]="{'error': passwordValidation || !isValid}" type="password" id="pass" placeholder="your password" formControlName="password"> <p class="error-message" *ngIf="passwordValidation || !isValid">please enter your user password</p> </div> <button class="btnConfig" id="btnlogin"><img src="./assets/icons/login-btn.png" alt="login"> Login</button> </form> </div> 登录.组件.ts： import { AfterContentChecked, Component, DoCheck, OnChanges, OnInit, SimpleChanges } from '@angular/core'; import { FormGroup, FormBuilder, Validators } from '@angular/forms'; import { Router } from '@angular/router'; @Component({ selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css'] }) export class LoginComponent implements OnInit, DoCheck { form!: FormGroup; isValid: boolean = true; constructor (private formBuilder: FormBuilder, private router: Router) {} ngOnInit(): void { this.form = this.formBuilder.group({ email: ['', Validators.required], password: ['', Validators.required] }); this.form.valueChanges.subscribe() } ngDoCheck(): void { this.form.valueChanges.subscribe(() => { this.isValid = this.form.valid; }); } get emailValidation() { return this.form.get('email')?.invalid || this.form.get('email')?.touched; } get passwordValidation() { return this.form.get('password')?.invalid && this.form.get('password')?.touched; } onClick() { if(this.form.valid) { this.router.navigate(['/dashboard']); } else { this.isValid = this.form.valid; } } } 实时预览验证一切正常，直到我按下登录按钮，两个输入字段为空，错误消息显示。当我只填写其中一个输入时，错误消息就会从两个字段中消失。我试过了 ngDoCheck(): void { this.form.valueChanges.subscribe(() => { this.isValid = this.form.valid; }); } 继续检查，但错误仍然没有消失。我通过删除 ngDoCheck 来修复问题，将订阅放入 ngOnInit 中，将 isVaild 替换为 isSubscribed，编辑passwordValidation 和 emailValidation，将 OnClick 编辑为 onSubmit 登录.组件.ts： import { AfterContentChecked, Component, DoCheck, OnChanges, OnInit, SimpleChanges } from '@angular/core'; import { FormGroup, FormBuilder, Validators } from '@angular/forms'; import { Router } from '@angular/router'; @Component({ selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css'] }) export class LoginComponent implements OnInit { form!: FormGroup; isSubmitted: boolean = false; constructor (private formBuilder: FormBuilder, private router: Router) {} ngOnInit(): void { this.form = this.formBuilder.group({ email: ['', Validators.required], password: ['', Validators.required] }); this.form.valueChanges.subscribe() } get emailValidation() { return this.form.get('email')?.invalid && (this.form.get('email')?.dirty || this.form.get('email')?.touched || this.isSubmitted); } get passwordValidation() { return this.form.get('password')?.invalid && (this.form.get('password')?.dirty || this.form.get('password')?.touched || this.isSubmitted); } onSubmit(): void { if(this.form.valid){ this.router.navigate(['/dashboard']) } this.isSubmitted = true; } } login.component.html： <div class="main"> <div class="image"> <img src="./assets/icons/login.png" alt="Login"> <p>Login in to your account</p> </div> <form [formGroup]="form" class="login" (ngSubmit)="onSubmit()"> <p class="error-message" style="font-size: large;" *ngIf="isSubmitted">Please fill the your info</p> <p>Enter your user name and password</p> <div class="userName"> <label for="userName">User name</label> <br> <input [ngClass]="{'error': emailValidation}" type="text" id="userName" placeholder="Your user name" formControlName="email"> <p class="error-message" *ngIf="emailValidation">please enter your user name</p> </div> <div class="pass"> <label for="pass">Password</label> <br> <input [ngClass]="{'error': passwordValidation}" type="password" id="pass" placeholder="your password" formControlName="password"> <p class="error-message" *ngIf="passwordValidation">please enter your user password</p> </div> <button class="btnConfig" id="btnlogin" type="submit"><img src="./assets/icons/login-btn.png" alt="login"> Login</button> </form> </div>

angular angular-reactive-forms

回答 1 投票 0

带有其他选项 Angular 的单选按钮

我正在研究 Angular 反应形式。表格中的第一个问题询问用户最喜欢的水果是什么。我想添加一个“其他”选项我正在研究 Angular 反应形式。表格中的第一个问题询问用户最喜欢的水果是什么。我想添加一个“其他”选项 <p> <label for="favFruit"><b>What's your favorite fruit</b></label> <br> <input type="radio" value="Apple" id="favFruit" name="favFruit" formControlName="favFruit"> Apple <br> <input type="radio" value="Banana" id="favFruit" name="favFruit" formControlName="favFruit"> Banana <br> <input type="radio" value="Orange" id="favFruit" name="favFruit" formControlName="favFruit"> Orange <br> <input type="radio" value="Pear" id="favFruit" name="favFruit" formControlName="favFruit"> Pear <br> <input type="radio" value="Grapes" id="favFruit" name="favFruit" formControlName="favFruit"> Grapes <br> <input type="text" value="" id="favFruit" name="favFruit" formControlName="favFruit"> </p> 我尝试过添加另一个值作为文本输入字段，但是，这允许用户选择多个选项。我希望当用户单击“其他”时会弹出其他选项，以便用户可以选择其他选项，但这将是他们唯一的选择。我建议用于填充其他值的 <input> 元素不要使用 formControlName 指令。当输入文本字段时，它应该更新 favFruit 控制值，这会导致取消选中之前选中的单选按钮。 <input type="text" value="" id="favFruit" name="favFruit" #otherFavFruit (input)="onOtherFavFruitInput(otherFavFruit.value)"> onOtherFavFruitInput(value: string) { this.form.controls.favFruit.setValue(value); } 另一种情况是，当您在文本字段中输入其他值时，您改变主意并选择其中一个单选按钮，您可以使用 (change) 事件来重置输入字段。 <input type="radio" value="Apple" id="favFruit" name="favFruit" formControlName="favFruit" (change)="onFavFruitChecked($event)"> import { Component, ElementRef, ViewChild } from '@angular/core'; @ViewChild('otherFavFruit') otherFavFruit!: ElementRef<HTMLInputElement>; onFavFruitChecked(event: any) { this.otherFavFruit.nativeElement.value = ''; } 请注意，您可以使用 *ngFor 生成一组表单控件，旨在减少 HTML 中的代码。 <ng-container *ngFor="let fruit of fruits"> <input type="radio" [value]="fruit" id="favFruit" name="favFruit" formControlName="favFruit" (change)="onFavFruitChecked($event)"> {{ fruit }} <br> </ng-container> fruits = ['Apple', 'Banana', 'Orange', 'Pear', 'Grapes']; 演示@StackBlitz

angular forms angular-reactive-forms

回答 1 投票 0

（Angular 5）错误：无法读取未定义的属性“setValue”

我正在以这种方式初始化我的表单，但是当我需要编辑它时，它不接受这些值组件.ts ngOnInit() { this.tinvoiceService.initForm(); } 语音服务.ts 表单：表单组；

angular angular-reactive-forms angular2-formbuilder formarray angular-formbuilder

回答 2 投票 0

用作输入时，FormGroup 不会发生 Angular 类型断言

我在不同的组件中有多种形式。我正在使用 formBuilder 为类型化表单创建 formGroups。当我通过 @Input 将创建的 formGroups 传递给子组件时，我不...

angular angular-reactive-forms angular-formbuilder

回答 1 投票 0

NG01203：mat-radio-group 的表单控件名称没有值访问器

单元测试失败，显示 Error: NG01203: No value accessor for form control name : 'gender' 。我已经使用了 NG_VALUE_ACCESSOR 但仍然相同。我正在使用响应式表单，HTML 代码是单元测试失败，提示 Error: NG01203: No value accessor for form control name : 'gender' 。我已经使用了 NG_VALUE_ACCESSOR 但仍然相同。我正在使用响应式表单，HTML 代码是 <mat-radio-group aria-label="Select an option" class="w-48" id="gender" name="gender" formControlName="gender" > <mat-radio-button value="Male" name="male">Male</mat-radio-button> <mat-radio-button value="Female" name="female">Female</mat-radio-button> </mat-radio-group> 我在这里做错了什么 { provide: NG_VALUE_ACCESSOR, useExisting: myComponent, multi: true } 确保您拥有正确的值访问器：验证您使用的是正确的值访问器令牌 (NG_VALUE_ACCESSOR) 并且它与您的自定义表单控件实现相匹配。检查您的自定义表单控件：确保您已在自定义表单控件组件中正确实现了 ControlValueAccessor 接口。 import { Component, forwardRef } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; @Component({ selector: 'app-custom-radio-group', template: ` <mat-radio-group [value]="value" (change)="onChange($event)"> <ng-content></ng-content> </mat-radio-group> `, providers: [ { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CustomRadioGroupComponent), multi: true, }, ], }) export class CustomRadioGroupComponent implements ControlValueAccessor { value: any; onChange: (value: any) => void = () => {}; onTouched: () => void = () => {}; writeValue(value: any): void { this.value = value; } registerOnChange(fn: (value: any) => void): void { this.onChange = fn; } registerOnTouched(fn: () => void): void { this.onTouched = fn; } } 确保您的自定义表单控件正确实现 ControlValueAccessor 接口并提供 NG_VALUE_ACCESSOR。检查您的测试配置：例如： TestBed.configureTestingModule({ declarations: [CustomRadioGroupComponent, YourComponent], // Include your custom form control and your component imports: [ReactiveFormsModule, MatRadioModule], }).compileComponents(); 检查测试 HTML：在您的测试 HTML 模板中，确保您正确使用自定义表单控件： <app-custom-radio-group formControlName="gender"> <mat-radio-button value="Male">Male</mat-radio-button> <mat-radio-button value="Female">Female</mat-radio-button> </app-custom-radio-group> 请验证这些方面，如果问题仍然存在，请提供有关自定义表单控件实现和测试设置的更多详细信息，以便我可以帮助您。

angular typescript unit-testing angular-reactive-forms angular-material2

回答 1 投票 0

angular-reactive-forms 相关问题

最新问题