标签: angular-reactive-forms

我正在尝试创建一个材质下拉包装器（mat-select dropdown），它将与 formControlName 一起使用。如果某人的库中有 Stackblitz，可以发布他们的 Stackblitz 吗？随意从头开始，并创建自己的答案，只要符合要求即可。

要求：

1）需要与formControlName一起使用。我们有带有 formBuilder 的父组件表单及其验证器，它试图引用这个子包装器。作为典型场景，父组件表单构建器还有许多其他表单字段。

2) 如果数据不满足父 FormBuilder 验证器的要求，则需要显示红色无效错误。

3) a) 不仅需要与 formControlName/patchValue 一起使用（patchValue 应该与整个类一起使用）；b) 如果有人将数据放入 @Input() SelectedValueId Id 数字，也可以选择。可以和两个一起工作

试图让它工作，但还没有成功，有人有任何代码来解决这个问题吗？

需要工作 stackblitz，才能获得成功的答案，

在本例中，Id 是 sourceOfAddressId

export class SourceOfAddressDto implements ISourceOfAddressDto {
    sourceOfAddressId: number | undefined;  // should work with this Id
    sourceOfAddressCode: string | undefined;
    sourceOfAddressDescription: string | undefined;

打字稿：

@Component({
    selector: 'app-address-source-dropdown',
    templateUrl: './address-source-dropdown.component.html',
    styleUrls: ['./address-source-dropdown.component.scss'],
    providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => AddressSourceDropdownComponent),
            multi: true
        }
    ]
})
export class …

我已经查了很多其他问题，但没有一个有效。

我正在尝试创建一个异步验证器来检查输入的用户名是否已经存在。但是每当我在输入字段中输入字母时，我都会收到一条错误消息，指出我的userService实例是undefined.

以下是我的UserService：

export interface UsernameCheck {
  info: string,
  usernameAvailable: boolean;
}

@Injectable({
  providedIn: 'root'
})
export class UserService {
  private apiUrl = 'http://localhost:5001/project-f-angular/us-central1';

  constructor(
    private http: HttpClient
  ) { }

  checkUsername(username: string) {
    const params = new HttpParams().set('username', username);

    return this.http.get<UsernameCheck>(`${this.apiUrl}/checkUsername`, {params});
  }
}

http 请求指向本地运行的 Firebase Cloud Functions 模拟器。

这是我正在使用它的组件：

export class SignUpComponent implements OnInit {
  signUpForm: FormGroup;

  constructor(
    private userService: UserService,
    private formBuilder: FormBuilder) {
  }

  ngOnInit() {
    this.signUpForm = this.formBuilder.group({ …

我有一个表单组，我需要显示 ngIf 所需的输入之一。但即使此输入不存在，formcontrol也会检查它并返回表单无效。我的代码就像这样的 html：

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <label>mobile</label>
  <input type="text" formControlName="mobile" />

  <div *ngIf="!hasInfo">
    <label>firstName</label>
    <input type="text" formControlName="firstName" />
    <label>lastName</label>
    <input type="text" formControlName="lastName" />
  </div>
  <button type="submit">Submit</button>
</form>

TS：

constructor(){
 this.formBuilder();
}

ngOnInit() {
    if (accountResponse.length > 0) this.hasInfo= true;
}

formBuilder() {
    this.myForm= new FormGroup({
      mobile: new FormControl(null, Validator.required()),
      firstName: new FormControl(null, Validator.required()),
      lastName: new FormControl(null, Validator.required()),
    });
 }

onSubmit(){
  if(this.myForm.valid){
    console.log("valid")
  }else{
    console.log("not valid")
  }
}

如果 hasInfo 为 true 则不显示名字和姓氏，我的表单应返回有效但始终无效

如何在接受数字的输入文本框中将第一个数字限制为 0。

例如：数字不能是这样的 012345 数字可以是这样的 123000

我使用了模式 /^0|[^0-9.]/ 但它不适用于角度反应形式。我的输入文本框控件如下所示：

<input type="text" class="form-control" id="inputNumber" formControlName="inputNumber" maxlength="5" minlength ="1" pattern="/^0|[^0-9.]/"   [(ngModel)]="inputNumber"  required>

任何想法都受到高度赞赏。

感谢帮助。

我在 NgRx 工作，收到此错误：

“预期有一个赋值或函数调用，但看到的是一个表达式。”

中的声纳问题this.sfForm.get('code')?.[this._mode ? 'disable' : 'enable']();。

我不明白来自声纳的消息，也不明白这里要解决什么问题。我需要一些帮助来理解代码并解决问题。

<mat-form-field [formGroup]="sfForm">
  <input Input
         matInput
         (keydown.enter)="search($event.target.value)"
         [type]="''"
         formControlName="code"
         required>
</mat-form-field>

sfForm: FormGroup;
private _mode: boolean = true;
      
public set scanMode(value: boolean) {
  this._mode = value;
  this.sfForm.get('code')?.[this._mode ? 'disable' : 'enable']();
}

我正在编写一个反应式表单，其中某些下拉值默认为 null，如下所示：

<div>\n    <label>My Dropdown</label>\n    <select formControlName="someId">\n        <option [value]="null">Choose whatever</option>\n        <option *ngFor="let data of dataArr" [value]="data.id">\n            {{ data.name }}\n        </option>\n    </select>\n</div>\n

我的表单初始化如下：

this.formBuilder.group({\n    //...\n    someId: this.fb.control(null)\n});\n

并用标准补丁patchValue(model)功能。

问题是 \xe2\x80\x93 当我选择“选择任何”选项时，该null值变成"null"字符串。我的其他逻辑依赖于空值为真null而不是字符串。我怎样才能避免这种情况？

如果它很重要，我用来修补表单的模型的类型string为someId。这是一个因素吗？

这就是我验证密码、确认密码和电子邮件、确认电子邮件的方式。如您所见，我有一个函数 fieldMatcher，它被调用来检查电子邮件和密码验证。

// Works

createForm() {
            this.formGroup = this._formBuilder.group({
                firstName: '',
                lastName: '',
                email: '',
                confirmEmail: '',
                password: '',
                confirmPassword: '',
            }, {validator: this.fieldMatcher});
        }
        fieldMatcher(c: AbstractControl): { invalid: boolean } {
            if (c.get('password').value !== c.get('confirm').value) {
                return {invalid: true};
            }
            if (c.get('email').value !== c.get('confirmEmail').value) {
                return {invalid: true};
            }
        }
    }

我想将控件作为参数传递给 fieldMatcher 函数，以便我减少如下代码但不起作用，

// Do not Work
createForm() {
        this.formGroup = this._formBuilder.group({
            firstName: '',
            lastName: '',
            email: '',
            confirmEmail: '',
            password: '',
            confirmPassword: '',
        },{validator: this.fieldMatcher(value1, value2)});
        } …

I have a mat-radio-group inside my form and I would like to clear the radio button so that nothing is selected for each new question in my quiz app. How do I go about doing this? Here's how my form looks:

<form [formGroup]="formGroup" (ngSubmit)="onSubmit()">
  <ol class="form-group">
    <mat-radio-group formControlName="answer" name="answer" (change)="radioChange($event.value)"
  (click)="question.selectedOption = option">
      <div class="radio-options" *ngFor="let option of question.options">
        <mat-radio-button class="option" [value]="option.optionValue" disableRipple="true"
          [checked]="question.selectedOption == option"
          [ngClass]="{'is-correct': isCorrect(option.optionValue),
                  'is-incorrect': isIncorrect(option.optionValue)}">
          <li>{{ option.optionText }}</li>