反应形式:如何在没有[(ngModel)]的角度上使用FormControl将输入值捕获到组件中的变量中？

Question

我的web应用程序前端有一个简单的文本输入，它接受一个userName：

<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"捕获输入值并将其分配给组件类(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的输入永远不会被捕获，控制台记录一个空白/未定义的输出。这里有什么东西我遗漏了吗？

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类属性，因为它只是用于初始化，在创建表单时可以直接这样做。

Answer 2

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

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

值将是{ formcontrolname: values }的对象。

这会在每次输入发生变化时触发，太频繁了。所以你可以做一些事情来控制事情。

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可以设置为“更改”、“更改”、“模糊”、“提交”。

在一个复杂和大的形式，这可以很容易地变成消防水管，但有几个选项，以限制流量的管理。

Answer 3

将输入值捕获为角反应形式的变量的

最佳方法：

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);
}