反应形式：如何使用 FormControl on Angular WITHOUT [(ngModel)] 将输入值捕获到组件内的变量中？

Question

我的网络应用程序前端 Angular 有一个简单的文本输入，它接受一个用户名：

<div [formGroup]="userNameFormGroupEnquiry">    
<mat-form-field>
      <mat-label>Chosen Name:</mat-label>
      <input name="chosenName" formControlName="chosenName" [(ngModel)]="chosenName" matInput type="text" placeholder="JOHN DOE"/>
      <mat-hint align="end">REQUIRED FIELD!</mat-hint>
      <mat-error *ngIf="hasNameError('chosenName', 'required')"
        >Minimum and Maxmimum of length 12 is required!</mat-error
      >
    </mat-form-field>
</div>

我使用 formGroup 是因为我打算在此 div 中添加更多输入字段，只想让此输入先工作。

我使用 [(ngModel)]="chosenName" 捕获输入值并将其分配给组件 class (this.chosenName) 中的一个变量。

我的组件如下：

@Component({
  selector: 'app-user',
  templateUrl: './userInput.component.html',
  styleUrls: ['./userInput.component.scss']
})
export class UserInputEnquiry implements OnInit {
  title = 'Welcome to this note-taking app!';
  chosenName: string;
  enquiryByUserInputForm: FormGroup;

  constructor() {}

  ngOnInit() {
    this.enquiryByUserInputForm = new FormGroup({
      chosenName: new FormControl('', [Validators.required, Validators.minLength(9), Validators.maxLength(9)])
    });
  }

  public hasLengthError = (controlName: string, errorName: string) => {
    return this.enquiryByUserInputForm.controls[controlName].hasError(errorName);
  };

  onSubmit() {
      console.log(this.chosenName);
  }

}

根据我之前问题的回答，我被告知不要使用 [(ngModel)]，因为 FormControl 已经包含输入捕获并且我收到了一个非常严重的警告，但这是怎么回事？

如果我从输入中删除 [(ngModel)]="chosenName"，则永远不会捕获 this.chosenName 的输入并且控制台会记录 blank/undefined 输出。我在这里遗漏了什么吗？

Answer 1

如果您想要任何初始值，请用它初始化 chosenName。

chosenName: string = '';

然后你可以用这个值初始化表单：

this.enquiryByUserInputForm = new FormGroup({
  chosenName: new FormControl(this.chosenName, [Validators.required, Validators.minLength(9), Validators.maxLength(9)])
});

提交后，您可以使用以下方式访问所有表单值：

  onSubmit() {
      console.log(this.enquiryByUserInputForm.value);
  }

要获取特定的控件值，您可以这样做：

  onSubmit() {
      console.log(this.enquiryByUserInputForm.get('chosenName').value);
  }

编辑： chosenName class 属性完全可以省略，只是为了初始化，直接在创建表单的时候就可以了。

Answer 2

如果您使用的是 ReactiveFormsModule，您可以订阅值更改。

this.userNameFormGroupEnquiry.valueChanges.subscribe(values => do something)

values 将是一个对象，其中 { formcontrolname: valueofinput}

每次任何输入更改时都会触发，太频繁了。所以你可以做一些事情来控制事情。

this.userNameFormGroupEnquiry.valueChanges.pipe(
     filter(() => this.userNameFormGroupEnquiry.valid && 
                  this.userNameFormGroupEnquiry.dirty),
     debounceTime(1000))
    .subscribe(values => do something)

这会检查表单中的更改和有效性，并消除抖动；这意味着它将在最后一次击键后发出一秒钟。这仍然经常触发，您还可以做另一件事。

当您定义表单控件时，您会执行如下操作：

this.userNameFormGroupEnquiry = new FormGroup( {
    chosenName: new FormControl('', { updateOn: 'blur', validators: 
              Validators.required }),
    ...
    })

updateOn 可以设置为'change' | 'blur' | 'submit'。

在复杂而庞大的形式下，这很容易变成消防水管，但有一些选项可用于将流量限制在可管理的范围内。

Answer 3

Best approach to capture input value into a variable in Angular reactive form:

chosenName: string = '';

ngOnInit() {
    this.enquiryByUserInputForm = this.formBuilder.group({
        chosenName: new FormControl(null, [Validators.required, Validators.minLength(9), Validators.maxLength(9)])
    });
}

get getFc() {
    return this.enquiryByUserInputForm.controls;
}

onSubmit() {
    this.chosenName = this.getFc['chosenName'].value
    console.log(this.chosenName);
}

反应形式：如何使用 FormControl on Angular WITHOUT [(ngModel)] 将输入值捕获到组件内的变量中？

Reactive form: How to capture the input value into a variable within component using FormControl on Angular WITHOUT [(ngModel)]?

form-control

angular-validation

angular

angular-reactive-forms