嘗試拆分注冊和登錄表單，并為密碼和密碼構造創建單獨的密碼組件。一般來說，我在表單中有表單控制。當我嘗試將所有必要的屬性放入組件中時，我得到了錯誤。它看起來像...... password.component.html
<mat-form-field appearance="fill" hintLabel="{{ hintLabel }}">
<mat-label>{{ titleOfField }}</mat-label>
<input
matInput
[type]="isPasswordHidden ? 'password' : 'text'"
[name]="name"
[formControlName]="formControlName"
/>
<button
mat-icon-button
matSuffix
(click)="togglePassVisibility($event)"
[attr.aria-label]="'Hide password'"
[attr.aria-pressed]="isPasswordHidden"
class="change-visibility"
>
<mat-icon>{{
isPasswordHidden ? "visibility_off" : "visibility"
}}</mat-icon>
</button>
</mat-form-field>
密碼.component.ts
import { Component, Input, OnInit } from '@angular/core';
@Component({
selector: 'app-password-field',
templateUrl: './password-field.component.html',
styleUrls: ['./password-field.component.scss'],
})
export class PasswordFieldComponent implements OnInit {
isPasswordHidden = true;
@Input() titleOfField!: string;
@Input() hintLabel!: string;
@Input() name!: string;
@Input() formControlName!: string;
constructor() {}
ngOnInit(): void {}
togglePassVisibility(e: Event) {
e.preventDefault();
this.isPasswordHidden = !this.isPasswordHidden;
}
}
和來自表單組件的片段
<app-wrapper>
<form class="container" (submit)="userLoginClick()" [formGroup]="form">
<app-password-field
titleOfField="Enter your password"
hintLabel="Use at least 6 symbols"
name="password"
formControlName="password"
></app-password-field>
</app-wrapper>
uj5u.com熱心網友回復：
這里有兩個選擇。ControlValueAccessor如果您希望能夠formControlName="password"像當前那樣在子標簽中使用，您可以實施。這是為此目的的SO答案：https ://stackoverflow.com/a/62260210/6294072
另一種選擇是將表單控制元件本身傳遞給孩子，如下所示：
<app-password-field
[formCtrl]="form.get('password')"
></app-password-field>
然后孩子會控制：
@Input() formCtrl!: FormControl
并在模板中使用，例如：
<input
matInput
[type]="isPasswordHidden ? 'password' : 'text'"
[name]="name"
[formControl]="formCtrl"
/>
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/524040.html
標籤：有角度的形式表单控制